The DataTables search bar does not let me search for content within child rows.
I have searched extensively to find the answer to this (1, 2, 3, 4, 5, 6, 7, 8, 9), but there are little to no responses on the issue.
Here's a simple jsfiddle and DataTables debugger results.
I want to search the table for an extension number (which is in the child row), but typing one of the extension numbers into the search bar leaves no search results.
I tried the solution from this post, by adding this:
table.columns().every( function () {
var that = this;
var header = this.header();
$( 'input', this.footer() ).on( 'keyup change', function () {
that
.column( header.getAttribute('data-search-index')*1 ) // *1 to make it a number
.search( this.value )
.draw();
} );
} );
...but it still doesn't work, as you can see in the jsfiddle linked above.
Can someone please help me out?
Thanks
In order for jQuery DataTables to search child rows you need to add data displayed in the child rows to the main table as hidden columns.
For example, you can add hidden column for extn
data property using columns.visible
option as shown below:
JavaScript:
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" },
{ "data": "extn", "visible": false }
],
HTML:
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</thead>
See this jsFiddle for code and demonstration. Search for 5407
and the first row will be shown even though data appears only in child row.