Javascript Datatable搜索函数不会根据多个值筛选表
我正在用datatable构建一个excel过滤器。我已经收集了表行的值,并将其推送到filter下拉列表中 数据表代码:Javascript Datatable搜索函数不会根据多个值筛选表,javascript,jquery,asp.net,sharepoint,datatable,Javascript,Jquery,Asp.net,Sharepoint,Datatable,我正在用datatable构建一个excel过滤器。我已经收集了表行的值,并将其推送到filter下拉列表中 数据表代码: datatable = $("#datatable").DataTable({ searching: true, columns: [ { title: "itemID", defaultContent: "" }, { title: "Name&
datatable = $("#datatable").DataTable({
searching: true,
columns: [
{ title: "itemID", defaultContent: "" },
{ title: "Name", defaultContent: "" },
{ title: "Age", defaultContent: "" },
{ title: "Country", defaultContent: "" },
{ title: "E-mail", defaultContent: "" },
{ title: "Address", defaultContent: "" },
{ title: "Fax", defaultContent: "" },
{ title: "Employee ID", defaultContent: "" },
{ title: "Occupation", defaultContent: "" },
{ title: "Phone", defaultContent: "" },
{ title: "", defaultContent: "" }
],
// Initialize the datatable header.
initComplete: function () {
var table = this.api();
var headers = $(this[0]).find("thead tr").children();
// For each header, append an input so it can be used for filtering the table.
$(headers).each(
column =>
(table
.column(column)
// Append the filter div and the arrow down icon.
.header().innerHTML += `<i class="arrow down"></i><div class="filter"></div>`)
);
}
});
在对表进行多次筛选后,它将停止筛选表。我很确定SearchDataTable函数中出现了一些错误,但我不明白到底是什么问题(没有错误消息)
如果有人能帮忙,我会很高兴的
谢谢大家! 我已经将问题发布在了上,下面是答案: 1:取消选中项目ID列中的8 2:选中名称中的name8选项 您看到的问题是没有显示名为8的行吗
列搜索是AND搜索,因此如果一列搜索过滤掉一行,则另一列中的列搜索不会显示该行。如果这是您要查找的内容,可以创建搜索插件来执行OR搜索。我已将问题发布在上,以下是答案: 1:取消选中项目ID列中的8 2:选中名称中的name8选项 您看到的问题是没有显示名为8的行吗 列搜索是AND搜索,因此如果一列搜索过滤掉一行,则另一列中的列搜索不会显示该行。可以创建一个搜索插件来执行OR搜索(如果这是您正在寻找的)
var thObject = $(this).closest("th");
var filterGrid = $(thObject).find(".filter");
filterGrid.empty();
filterGrid.append(
'<div><input id="search" type="text" placeholder="Search"></div><div><input id="all" type="checkbox" checked>Select All</div>'
);
// Loop through all the datatable rows.
datatable.rows().every(function (rowIdx, tableLoop, rowLoop) {
// Get current td value of this column.
var currentTd = this.data()[$(thObject).index()];
// Get the tr tag of this row.
var row = this.table().rows().context[0].aoData[rowIdx].nTr;
var div = document.createElement("div");
// filterValues is a local variable to store all the filter values and to avoid duplication.
if (filterValues.indexOf(currentTd) == -1) {
div.classList.add("grid-item");
// if the row is visible, then the checkbox is checked.
var str = $(row).is(":visible") ? "checked" : "";
// For this div, append an input field of type checkbox, set its attribute to "str" (checked or not), with the value of the td.
div.innerHTML = '<input type="checkbox" ' + str + " >" + currentTd;
// filterGrid is a local variable, which is the div of the filter in the header.
filterGrid.append(div);
filterValues.push(currentTd);
}
});
filterGrid.append(
'<div><input id="close" type="button" value="Close"/><input id="ok" type="button" value="Ok"/></div>'
);
filterGrid.show();
var $okBtn = filterGrid.find("#ok");
var checkedValues = [];
$okBtn.click(function () {
// checkedValues is a local variable to store only the checkboxes that has been checked from the dropdown fiter.
// Empty the array.
checkedValues = [];
// filterGrid is the dropdown jquery object.
filterGrid
// find all the checked checkboxes in the filterGrid.
// ".grid-item" is a class of div that contains a checkbox and a td's value of the current datatable column.
.find(".grid-item input[type='checkbox']:checked")
// The result is an array.
// For each index in this array, push it to checkedValues array (store the values).
.each(function (index, checkbox) {
checkedValues.push($(checkbox).parent().text());
});
// Show relative data in one page.
datatable
// In datatable, search in this specific column by the index of the thObject (the header element) to search in the right tds.
.column($(thObject).index())
// Call search function (datatable built in function) to search in the table for all the selected values.
// Search function allows strings, so call the checkedValues array, join all the values together(exmp. "name1|name2|name3") to allow multi search.
// Draw the new table.
// "^"- Start of string or start of line depending on multiline mode.
// "$"- End of string or end of line.
.search("^(" + checkedValues.join("|") + ")$", true, false, true)
.draw();
// Hide the dropdown filter.
filterGrid.hide();
return false;
});