DataTables搜索子行内容

Question

DataTables搜索栏不允许我搜索子行中的内容.

我已搜查广泛找到这个问题的答案(1,2,3,4,5,6,7,8,9),但有一点在这个问题上没有任何反应.

这是一个简单的jsfiddle和DataTables调试器结果.

我想在表格中搜索分机号码(在子行中),但在搜索栏中输入一个分机号码不会留下任何搜索结果.

我通过添加以下内容尝试了此帖子中的解决方案:

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

...但它仍然不起作用,你可以在上面链接的jsfiddle中看到.

有人可以帮帮我吗？

谢谢

Answer 1

解

为了使jQuery DataTables能够搜索子行,您需要将子行中显示的数据作为隐藏列添加到主表中.

例如,您可以extn使用columns.visible选项为data属性添加隐藏列,如下所示:

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

有关代码和演示,请参阅此jsFiddle.搜索5407并显示第一行,即使数据仅出现在子行中.