数据表搜索功能不过滤 Table 多个值

Question

我正在使用数据table 构建一个excel 过滤器。我已经收集了 table 行的值并将其推送到过滤器下拉列表中。

screenshot of the dropdown.

数据table代码：

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

点击箭头打开下拉过滤器：

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

下面是选择值过滤数据后点击确定按钮的代码table:

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

过滤 table 几次后，它停止过滤 table。我很确定搜索数据table函数有问题，但我不明白确切的问题是什么（没有错误消息）。

link to js fiddle.

如果有人能提供帮助，我会很高兴。

谢谢！

Answer 1

我已将问题发布到 datatable forum，这里是答案：

1：取消选中项目 ID 列中的 8

2：勾选Name

中的name8选项

您看到的问题是没有显示名称为 8 的行吗？

列搜索是 AND 搜索，因此如果一个列搜索过滤掉一行，则在另一列中进行列搜索将不会显示该行。如果这是您要查找的内容，可以创建一个搜索插件来执行 OR 搜索。

数据表搜索功能不过滤 Table 多个值

Datatable Search Function Does Not Filter The Table On Multiple Values

javascript

asp.net

datatable

sharepoint

jquery