Блог

Я создаю фильтр Excel с помощью datatable. Я собрал значения строк таблицы и поместил их в раскрывающийся список фильтров.

скриншот выпадающего списка.

Код с данными:

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

 

Вот код для нажатия кнопки «Ок» после выбора значений для фильтрации таблицы данных:

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

После фильтрации таблицы пару раз она прекращает фильтрацию таблицы. Я почти уверен, что что-то не так в функции поиска данных, но я не могу понять, в чем именно проблема (сообщений об ошибках нет).

ссылка на js fiddle.

Я был бы рад, если кто-нибудь сможет помочь.

Спасибо!

Я разместил вопрос на форуме datatable, и вот ответ:

1: Снимите флажок 8 в столбце идентификатора элемента

2: Проверьте параметр name8 в имени

Проблема, которую вы видите, в том, что строка с name8 не отображается?

Поиск по столбцам — это поиск И, поэтому, если поиск по одному столбцу отфильтровывает строку, поиск по столбцу в другом столбце не отобразит строку. Можно создать плагин поиска для выполнения поиска ИЛИ, если это то, что вы ищете.