DataTables 搜索子行内容 [英] DataTables search child row content

问题描述

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

The DataTables search bar does not let me search for content within child rows.

我进行了广泛的搜索以找到答案(1, 2、3、4, 5, 6, 7，8, 9)，但对这个问题几乎没有回应.

I have searched extensively to find the answer to this (1, 2, 3, 4, 5, 6, 7, 8, 9), but there are little to no responses on the issue.

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

Here's a simple jsfiddle and DataTables debugger results.

我想在表格中搜索分机号码(位于子行中)，但在搜索栏中输入分机号码之一没有搜索结果.

I want to search the table for an extension number (which is in the child row), but typing one of the extension numbers into the search bar leaves no search results.

我尝试了这篇文章中的解决方案，通过添加:

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 中所见.

...but it still doesn't work, as you can see in the jsfiddle linked above.

有人可以帮我吗?

谢谢

推荐答案

SOLUTION

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

SOLUTION

In order for jQuery DataTables to search child rows you need to add data displayed in the child rows to the main table as hidden columns.

例如，您可以使用 为 extn 数据属性添加隐藏列columns.visible 选项如下图:

For example, you can add hidden column for extn data property using columns.visible option as shown below:

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>

演示

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

DEMO

See this jsFiddle for code and demonstration. Search for 5407 and the first row will be shown even though data appears only in child row.

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