DataTables搜索子行内容
DataTables搜索栏不允许我搜索子行中的内容。
我已经进行了广泛的搜索以找到答案（ 1,2,3,4,5,6,7,8,9 ），但在这个问题上几乎没有回答。
这是一个简单的jsfiddle和DataTables调试器结果 。
我想在表格中搜索分机号码（在子行中），但在搜索栏中键入其中一个分机号码不会留下任何搜索结果。
我通过添加以下内容尝试了此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中看到。
有人可以帮帮我吗？
谢谢
解
为了使jQuery DataTables能够搜索子行，您需要将子行中显示的数据作为隐藏列添加到主表中。
例如，您可以使用extn选项为extn data属性添加隐藏列，如下所示：
JavaScript的：
"columns": [ { "class": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "salary" }, { "data": "extn", "visible": false } ],
HTML ：
Name Position Office Salary Extn.
DEMO
有关代码和演示，请参阅此jsFiddle 。 搜索5407 ，即使数据仅出现在子行中，也会显示第一行。
我不得不问：是什么让您相信只有在显示子行时才可以搜索动态注入的子行内容？ 而且， 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字段以便于访问：
'' + d.extn + ' ' +
显示子行时，从details[]插入预渲染的内容，而不是调用format() ：
if (row.child.isShown()) { row.child.hide(); tr.removeClass('shown'); } else { row.child(details[row.index()]).show(); tr.addClass('shown'); }
创建一个filter，该filter仅返回具有包含特定分机号码的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(); }
在输入处理程序中使用该自定义filter而不是column()搜索：
table.columns().every( function () { $( 'input', this.footer() ).on( 'keyup change', function () { filterByDetailsExtNo(this.value); }); });
分叉小提琴 – > https://jsfiddle.net/7o67vhrz/
更新 。 要将上述filter应用于常规搜索框：
$('.dataTables_filter input') .off() .on('keyup', function() { filterByDetailsExtNo(this.value); });
另一个分叉的小提琴 – > 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=0) { return true } } return false; } ) table.draw(); $.fn.dataTable.ext.search.pop(); }
小提琴 – > https://jsfiddle.net/h2u4fowj/
这是一个很老的线程，接受的答案确实有效，但我想提出一个替代解决方案。
我有同样的问题无法在子行中搜索，我的解决方案是在我的表的末尾创建一个隐藏的
包含子行中的数据 – 这样，索引器看到它但是用户没有。
对于有限的HTML，我添加了一个新列：
Data
然后，在DataTables调用中：
//Within var table = $('#table').DataTable( {.... columns : [ //{ className : 'details-control'}, { data : 'a' }, //ae 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推荐的方法执行此操作：
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; }
您在表的末尾留下了一个
，其中包含子行中的所有内容，但它是不可见的，并且它适用于搜索框/filter。