Question

DataTables搜索栏不允许我搜索child rows内的内容。

我已广泛搜索以找到答案（1，2，3，4，5，6， 7，8，9），但在此问题上几乎没有回复。

这是一个简单的jsfiddle和DataTables debugger results。

我想在表格中搜索分机号码（在子行中），但在搜索栏中键入其中一个分机号码不会留下任何搜索结果。

我尝试了this post的解决方案，添加了以下内容：

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 linked above中看到的那样。

有人可以帮帮我吗？

由于

Answer 1

解

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

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

<强> 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>

样本

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

Answer 2

我不得不问：是什么让您相信只有在显示子行时才可以搜索动态注入的子行内容？那column()搜索如何覆盖其他行的内容呢？

当这样说时，当然有一种解决方法。而不是一遍又一遍地创建子行内容，而是将其保存在一个数组中：

var details = [];

现在，当您初始化表时，也会初始化子行内容：

...
columns: [{
   className: 'details-control',
   orderable: false,
   data: null,
   defaultContent: '',
   render: function(data, type, row, meta) {  
      details[meta.row] = format(data);
   }    
}, 
...

在format（）函数中，将一个类添加到Extension Number字段以便于访问：

'<td class="extNo">' + d.extn + '</td>' +

当您显示子行时，请插入details[]中的预渲染内容，而不是调用format()：

if (row.child.isShown()) {
   row.child.hide();
   tr.removeClass('shown');
} else {
   row.child(details[row.index()]).show();            
   tr.addClass('shown');
}

创建一个过滤器，该过滤器仅返回具有details[]子行的行，其中包含某个分机号：

function filterByDetailsExtNo(extNo) {
    $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
       return $(details[dataIndex]).find('.extNo').text() == extNo;
    }    
  )
  table.draw();
  $.fn.dataTable.ext.search.pop();
}

在输入处理程序中使用该自定义过滤器而不是column()搜索：

table.columns().every( function () {
    $( 'input', this.footer() ).on( 'keyup change', function () {
        filterByDetailsExtNo(this.value);
    });
});

分叉小提琴 - ＆gt;的 https://jsfiddle.net/7o67vhrz/

<强>更新即可。要将上述过滤器应用于常规搜索框：

$('.dataTables_filter input')
   .off()
   .on('keyup', function() {
      filterByDetailsExtNo(this.value);
   });

另一个分叉的小提琴 - ＆gt;的 https://jsfiddle.net/ds3qp41g/

最后一个例子。结合详细信息搜索和“本机”搜索

function filterByDetailsExtNoAndInput(term) { $.fn.dataTable.ext.search.push( function(settings, data, dataIndex) { if ($(details[dataIndex]).find('.extNo').text() == term) return true; for (var i=0;i<data.length;i++) { if (data[i].toLowerCase().indexOf(term.toLowerCase())>=0) { return true } } return false; } ) table.draw(); $.fn.dataTable.ext.search.pop(); }

小提琴 - ＆gt;的 https://jsfiddle.net/h2u4fowj/

Answer 3

这是一个很老的线程，接受的答案确实有效，但我想提出一个替代解决方案。

我遇到了同样的问题，无法在子行中搜索，我的解决方案是在我的表的末尾创建一个隐藏的<td>，其中包含子行中的数据 - 这样，索引器看到它，但用户没有。

对于有限的HTML，我添加了一个新列：

<th class="hidden">Data</th>

然后，在DataTables调用中：

//Within var table = $('#table').DataTable( {....
columns : [
        //{ className : 'details-control'},
        { data : 'a' }, //a-e are the columns I want the user to see.
        { data : 'b' },
        { data : 'c' },
        { data : 'd' },
        { data : 'e' },            
        // this last one is my "index helper"
        { data : 'comments',
          render : function(data, type, full, meta) {
            return full.f + full.g + full.h + full.i;
          }
         }
    ],

然后你只需要隐藏这一列。你可以通过DataTables＆＃39;推荐方法：

https://datatables.net/examples/basic_init/hidden_columns.html

或通过我选择的方法：

"createdRow" : function (row,data,index) {
    $('td',row).eq(6).addClass('hidden');
}

//and the css...
.hidden {
 visibility: hidden;
}

您在表格的末尾留下了一个<td>，其中包含子行中的所有内容，但它不可见，并且可以与搜索框/过滤器一起使用。< / p>

Answer 4

如果您在一列中列出了扩展名，则需要像这样拆分它们。

              {"data": "extn", "visible": false,
               "render": function (data, type, row, meta) {

                        var htmlDetail = '';                            
                        yourList.forEach(function (item) {
                            htmlDetail += item.extn + '|';
                        });
                        return type === 'display' ? htmlDetail : htmlDetail;
              }

DataTables搜索子行内容

4 个答案:

解

样本