数据表 - 子行内的列搜索 [英] DataTables - Column Search within child rows

问题描述

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

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

查看此示例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?

在我的示例中复制：如果您搜索用户Tiger Nixon并展开它们，称为所有办公室。当您搜索纽约（或任何这些办公室）时，我想要显示此用户，而不仅仅是爱丁堡的主要用户。

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.

相关的JavaScript代码：

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

作为注释，我的数据通过实时Ajax调用加载，并且我完全控制正在返回的数据。

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

Cross发布在Datatables论坛上这里

Cross posted on the Datatables forum here

推荐答案

我有一个类似的问题， davidkonrad很善于提供解决方案。

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

请参阅我的问题：数据表搜索小孩行内容

这篇关于数据表 - 子行内的列搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！