DataTables - Column Search within child rows

╄→尐↘猪︶ㄣ 提交于 2019-12-24 15:16:03

问题


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


回答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



来源:https://stackoverflow.com/questions/30264693/datatables-column-search-within-child-rows

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!