DataTables - Column Search within child rows

Question

I have a datable that is using both child rows and column searching (filtering).

See this Sample JSFiddle

Taken from a couple DataTables Examples: Example of Child Rows - Example of Column Searching

When searching a column, I would like for the results to include information inside the child row.

For example, from the column searching example, the person may have multiple offices (Tokyo, London, and New York) that you could only see from expanding a child. I would like for the main row to display this person when ANY of the offices are entered, not just the one displayed on the row.

Is there a way to search through the data for a row, and not just the displayed text?

To duplicate in my example: If you search for the user Tiger Nixon, and expand them, they have section called All Offices. I would like for this user to be displayed when you search for "New York" (or any of these offices), not just the primary of Edinburgh.

Relevant JavaScript Code:

var table = $('#example').DataTable({
    data: mdata,
        "columns": [{
        "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
    }, {
        "data": "name"
    }, {
        "data": "position"
    }, {
        "data": "office"
    }, {
        "data": "salary"
    }],
        "order": [
        [1, 'asc']
    ]
});

 $('#example tfoot th').each( function () {
    var title = $('#example thead th').eq( $(this).index() ).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );


// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row(tr);

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    } else {
        // Open this row
        row.child(format(row.data())).show();
        tr.addClass('shown');
    }
});

 // Apply the search
table.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        that
            .search( this.value )
            .draw();
    } );
} )

As a note, my data is loaded via a live Ajax call, and I do have full control over the data being returned.

Cross posted on the Datatables forum here

Answer 1

I had a similar issue, and Mr. @davidkonrad was kind enough to offer a workaround solution.

See my question here: DataTables search child row content