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. However I want to be able to expand the rows to show detailed information.

Very much like the example Here

However, the site I'm working with currently does not have any sort of web services set up on it yet, so I won't be able to make ajax calls to get the expanded information like the example uses.

Is there a way I can supply all of the necessary information for the parent child relationship on a fully rendered page?

Can I somehow nest the table data to get this, or tell DataTables to make every other table row a child of the one above it?

I posted this same question on the datatables forums: Question

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.