jquery - DataTables search child row content

Question

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

Answer 1

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>

DEMO

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.