我必须问一下:是什么让您相信只有在显示子行时才能在动态注入的子行内容中搜索?而 column()
搜索又如何能够涵盖其他行的内容呢?
当然,有一个解决方法。可以将子行内容保存在数组中,而不是反复创建 :
var details = []
现在,当您初始化表时,也要初始化子行内容:
...
columns: [{
className: 'details-control',
orderable: false,
data: null,
defaultContent: '',
render: function(data, type, row, meta) {
details[meta.row] = format(data);
}
},
...
在format()函数中,为分机号字段添加一个类以便于访问:
'<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);
});
});
分叉的JSFiddle示例 -> https://jsfiddle.net/7o67vhrz/
更新。要将上述过滤器应用于通用搜索框:
$('.dataTables_filter input')
.off()
.on('keyup', function() {
filterByDetailsExtNo(this.value);
});
又一个分支的 JSFiddle -> 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();
}
fiddle -> https://jsfiddle.net/h2u4fowj/