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.

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)%>

Answer 4

The problem with format function is, if your div is a complex html, then creating it by concatenating strings is cumbersome.

If you look at the documentation, you will find that row.child() function also accepts Jquery node objects as input !!

So you can create your div element the usual way

<div class="hidden" id="hidden-info">
    Name: test1 <br/>
    Value: 10
</div>

Hide it using Jquery this way

$(".hidden").hide()

And then when you need to create the row child. Search for the div. Clone it. And pass it as a Jquery node object to row.Child() function.

row.child($("#hidden-info").clone().removeClass("hidden")).show();

No more headache of string concatenations and formatting