我有一个表,我试图使用jQuery DataTables实现单独的列搜索。描述如何执行此操作的API在此处:https://datatables.net/examples/api/multi_filter.html这是我在尝试实现此操作时使用的。我还使用全局搜索功能,它允许我搜索所有表格。据我所知,冲突发生在使用
之间 var table = $(".datatable").dataTable();
与
var table = $(".datatable").DataTable();
因为它们会返回两个不同的东西(在下面给出相关问题的答案中对此进行了描述 - > dataTable() vs. DataTable() - why is there a difference and how do I make them work together?阅读完之后,我尝试使用这样的解决方案:
table.api().columns().eq(0).each(function(colIdx) {
但遗憾的是,这并没有使这项功能发挥作用。该表与每列底部的搜索框一起显示正常,全局搜索完美无缺。如果你能发现我可能做错的事情或给出任何建议,我将不胜感激。完整的脚本如下:
script.
$(document).ready(function() {
$('.datatable').DataTable({
});
// THIS IS THE GLOBAL SEARCH CODE
$.fn.dataTableExt.oApi.fnFilterAll=function(oSettings,sInput,iColumn,bRegex,bSmart){
var settings = $.fn.dataTableSettings;
for (var i = 0; i < settings.length; i++) {
settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
}
};
var table = $(".datatable").dataTable();
$("#Search_All").keyup(function () {
// Filter on the column (the index) of this element
table.fnFilterAll(this.value);
});
// THIS IS THE INDIVIDUAL COLUMN SEARCH
$('.datatable tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
table.api().columns().eq(0).each(function(colIdx) {
var that = this;
$('input', this.footer()).on('keyup change', function(){
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
})
});
});
谢谢你的时间!