populate child row with data from datatable's ajax function

embirath

Hey all

I have a data table, which gets the data through an ajax function. One of the columns returned by that ajax function has values that are too long, and I want to place that into a child row instead.

I have the child rows set up in the interface, but I'm trying to figure out how to populate each child row, with the data returned from the ajax function, without calling the ajax function twice.

I thought perhaps I can add the data into the child rows when the datatable is done loading, through the initComplete function? But how can I access the already retrieved data from the ajax call? How can I access
this without having to call the ajax function again?

My code looks something like this. I tried accessing the data through the json parameter to initComplete, but that appears to return an empty array?

Any help would be appreciated as I'm currently banging my head against a wall...
Emma

$(document).ready(function () {
            $('#example').DataTable({
                ajax: {
                    url: 'my/url',
                    data: function (data) {
                      data.session = 'somevalue';
                    },
                    dataSrc:'data',
                },
                columns: [
                    { "data": "blah1"},
                    { "data": "blah2"},
                    { "data": "blah3"},
                    { "data": "longvaluecolumn"},  // i want to move this into child row
                ],
                initComplete: function(settings, json) {
                    // Here i want to populate the child rows
                    // without showing the child rows, using data 
                    // output from the above ajax function
                    // This returns nuthin (empty array):
                    alert(json.data);
                    console.log(json.data);
                }
            });
        });

kthorngren

Take a look at the example. Notice the extn property is displayed in the child but is not one of the columns. Click the ajax tab to see that its part of the original data source. All the data returned for each row is available to the API's event if they are not shown in a column.

Basically you can just use that example and change the format function to display the HTML you want. No need to try populating the child rows using `-option initComplete.

Not sure why console.log(json.data); is an empty array. It seems to work here:
http://live.datatables.net/vogunugu/1/edit

Kevin

embirath

Thank you SO much. That works. I was making it much harder than it was.

Sorry that I missed this was actually being done in the example.