DataTables - Expand Child details without using Ajax

Question

I\'m working on a page that uses jquery DataTables (version 1.10). The TableData source is currently being sent as just an HTML table on the rendered page, and works perfect. Ho

Answer 1

You can store the data for the child row in a data attribute of the parent row and change the format method from the example accordingly. Something like

In your HTML:

<tr data-child-name="test1" data-child-value="10">
    <td>ParentRow</td>
    <td>No. 1</td>
</tr>

In the click handler (line 50 from the example):

row.child(format(tr.data('child-name'), tr.data('child-value'))).show();

And as format method something like:

function format (name, value) {
    return '<div>Name: ' + name + '<br />Value: ' + value + '</div>';
}

Answer 2

While technically this example isn't exactly using AJAX, it is essentially exactly the same concept. You are still forced to add rows using a format function, whether than format function builds the HTML getting values from AJAX or hard-coded into your data-attributes, what is the difference.

As far as I know, there is no way to have the child rows inserted into your HTML from the start and just have the expand controls just SHOW the already existing HTML for the child rows, not build the child row HTML, insert it into the DOM and show it.

Answer 3

Whoever ends up here. I know this question has already an accepted answer, but it didn't work for me. What worked for me: I used exact example from here: https://datatables.net/examples/api/row_details.html Only thing I changed is

 $(document).ready(function() {
    var table = $('#example').DataTable( {
    "ajax": "../ajax/data/objects.txt", <-- this line I changed

To

 $(document).ready(function() {
    var table = $('#example').DataTable( {
    "data": <%-JSON.stringify(data.table)%>,

I used ejs so I sent data from server-side and in html I could use <%= data %>, which had the table, but in html script I had to use data.table like this:

<%-JSON.stringify(data.table)%>