Loading child row using ajax

BJW86

Im having some trouble loading data in a child row using ajax, could anyone point me in the right direction?

http://live.datatables.net/rorajona/1/edit

Thanks,
Bruce

kthorngren

Here is the ajax code to load the child data:

    $.ajax( {
    method: 'GET',
        url: "'http://localhost:3000'+Link",
        dataSrc: '',
        success: function (data) {   

First dataSrc: '', is not an option for jQuery ajax() so it can be removed. Its not the problem though.

The problem is with url: "'http://localhost:3000'+Link",. Your data has this object {data: 'Link', title: 'Link'}. To access this in the format function you need to use this instead:

url: "http://localhost:3000" + rowData.Link,

Depending on what rowData.Link contains you may or may not need to add a slash after 3000, for example: "http://localhost:3000/" + rowData.link.

Kevin

BJW86

Brilliant, thank you very much Kevin.

I have the data I am after now, the only thing is the + icon seems to have disappeared and when the data loads the child row is opening very wide, can I fix this in the CSS?

Thanks again.
Bruce

BJW86

Ive also noticed if I turn the paging off or increased the number of rows, the green icon comes back but it seems to break the child row so it won't work at all.. is there a way to turn off paging but keep the child row working?

Thanks
Bruce

allan

Most likely you are having a problem with Responsive and your custom child row controls trying to use the same elements to control the same icons.

I guess the question becomes - do you need both? If not, remove the responsive class from the table. That would be a good check to make sure I'm on the right track anyway.

Allan

allan

I meant to add this as well - if you don't need Responsive controlling the child rows, but you do want it to hide columns as the browser window gets smaller see this example.

Allan

BJW86

Sorted, thanks Allan

Bruce