Question

我有一个使用子行和列搜索（过滤）的数据。

取自几个DataTables示例：Example of Child Rows - Example of Column Searching

搜索列时，我希望结果包含子行内的信息。

例如，从列搜索示例中，此人可能有多个办公室（东京，伦敦和纽约），您只能通过扩展孩子来看到这些办公室。我希望主要行在输入任何办公室时显示此人，而不仅仅是行上显示的那个。

有没有办法搜索一行的数据，而不只是搜索显示的文本？

要复制我的示例：如果您搜索用户Tiger Nixon并展开它们，则会有一个名为All Offices的部分。我希望在您搜索“纽约”（或任何这些办事处）时显示此用户，而不仅仅是爱丁堡的主要部门。

相关JavaScript代码：

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();
    } );
} )

注意，我的数据是通过实时Ajax调用加载的，而且我可以完全控制返回的数据。

Cross发布在Datatables论坛here

上

Answer 1

我遇到了类似的问题，@ davidkonrad先生非常友好地提供了解决方案。

在此处查看我的问题：DataTables search child row content

DataTables - 子行中的列搜索

1 个答案: