Piotr Kamoda Piotr Kamoda - 14 days ago 7
jQuery Question

DataTables child row or nested table on init

I'm wondering if there is a way to make chosen columns appear in nested/child row like in this example from DataTables.net but without this manual parsing with jquery?

There are similar questions but none was answered, so I'm hoping this question will get more attention :)

I've tried

responsive
option like this:



var table = $("#example").DataTable({
        "processing": true,
        "serverSide": true,
"scrollY":'60vh',
        "scrollCollapse":true,
//"scrollX":true,
"responsive":true,
        "ajax": {
"url":upTableUrl,
"data":function(d) {
d.file = $.urlParam('file');//'data_extr.json';
search_obj = d;
}
}, "columns":[
...
],
"columnDefs":[
...
]
    });


and some html (Watch out for django here):

<table width="100%" class="display nowrap table table-striped table-bordered" id="example" cellspacing="0">
<thead>
<tr>
{% for col in columns %}<th>{{col}}</th>
{% endfor %}
</tr>
</thead>
<tfoot>
<tr>
{% for col in columns %}<th>{{col}}</th>
{% endfor %}
</tr>
</tfoot>
</table>


The table is still x-axis-scrollable and no buttons or other stuff appearing.

Answer

Using Row details requires from you to write your own formatting function.

However you can use Responsive extension where columns can be displayed in a child row under certain conditions.

By default extension hides all columns that don't fit the container in a child row, see this example.

However you can control visibility of the columns with special classes applied either to corresponding th element or using columns.className option, see this example.