DataTable搜索子行内容 [英] 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 和< a href =http://debug.datatables.net/egijat =nofollow noreferrer> DataTables调试器结果。

我要搜索分机号码（在小孩行中）的表格，但是在搜索栏中输入一个分机号码就没有搜索结果。

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.

我尝试了解决方案从这篇文章，添加以下内容：

I tried the solution from this post, by adding this:

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.

有人可以帮我吗？

谢谢

推荐答案

解决方案

为了让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 data属性的隐藏列datatables.net/reference/option/columns.visiblerel =nofollow noreferrer> 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.

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