过滤后更新数据表信息

Question

LIVE DATATABLES

数据table 有两个搜索过滤器：

普通text input
一个Statusselect

使用第一个过滤器，table 按预期工作。

第二个过滤器是 select，它可以过滤状态（活动或非活动），而不像第一个过滤器那样基于文本。

问题如下：

假设我在搜索输入中键入 d，但没有状态为 selected:

我收到 4 个条目。

这是我收到的文本：

Showing 1 to 4 of 4 entries (filtered from 7 total entries)

如果我 select 现在是状态，例如 Active，我会得到 3 个结果。

这是我收到的文本：

Showing 1 to 4 of 4 entries (filtered from 7 total entries)

但应该是：Showing 1 to 3 of 3 entries (filtered from 7 total entries)

我认为问题是我必须在应用基于非文本的过滤器后重新绘制 table。但我不知道该怎么做。

我尝试过的方法（没有用，因为我使用 CSS 隐藏了行）：

$('#search2').on('change', () => {
  const state = $("#search2").val();
  if (state === "none") {
    $(".status-active").parent().parent().attr("hidden", false);
    $(".status-inactive").parent().parent().attr("hidden", false);
    return;
  }

  $(".status-" + ((state === "active") ? 'inactive' : 'active')).parent().parent().attr("hidden", true);
  $(".status-" + state).parent().parent().attr("hidden", false);
  DT1.search(state).draw();
});

我该如何解决这个问题？

Answer 1

这是我找到的

$('#search2').on('change', () => {
    const state = $("#search2").val();
    $.fn.dataTable.ext.search.pop();
    if (state === "none") {
      DT1.draw();
      return;
    }
    $.fn.dataTable.ext.search.push(function(settings, searchData, index, rowData) {
      const $td = DT1.row(index).nodes().to$().find('td');
      return $td.find(`.status-${state}`).length;
    });
    DT1.draw();
  });

因此，为了确保数据没有被隐藏或删除，而只是被过滤，我们应该使用 built-in 搜索方法。

$.fn.dataTable.ext.search.pop();

这是为了在您要过滤数据时确保数据处于未过滤状态。

if (state === "none") {
  DT1.draw();
  return;
}

当你不过滤时，我们只需要绘制table和return。因为上一行我们确保 tables 根本没有被过滤

$.fn.dataTable.ext.search.push()

这是我在网上找到的解决方案。这个其实我解释不了。

const $td = DT1.row(index).nodes().to$().find('td');

这个是为了获取 table 中的所有 <td>，也许你可以改进这个，只找到想要的 td，但是这个已经可以工作了。

return $td.find(`.status-${state}`).length;

找到 td 标签后，我们必须确保找到我们想要的 class。如果找不到则 return 0

DT1.draw();

然后绘制过滤后的table.

过滤后更新数据表信息

Update datatable info after filtering

jquery

datatables