Javascript Datatable搜索函数不会根据多个值筛选表

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构建一个excel过滤器。我已经收集了表行的值,并将其推送到filter下拉列表中

数据表代码:

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;
  });