DataTables - Expand Child details without using Ajax

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.

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>';
}