过滤后动态添加到表的行不隐藏

Posted 2023-05-09

【中文标题】过滤后动态添加到表的行不隐藏

【英文标题】：Dynamically added rows to table after filtering are not hiding

【发布时间】：2020-11-07 02:52:17

【问题描述】：

我正在使用 DataTable API 和 jquery 在从服务器获取其行后构造一个表。然后我按 btn 加载其他行并将 添加到表的末尾。问题是当我隐藏某些列时：初始行摆脱了触发的列，但稍后加载的列不受过滤器的影响。如何解决这个问题？经过研究，我发现在过滤函数时会获取所有行而不是初始行。

var data = $(this).dataTable().toArray();
  if ($this.prop("checked") === false) 
    data.forEach(function (element) 
       $(element).DataTable().columns().column(column).visible(false);
    );
 else 
  data.forEach(function (element) 
    $(element).DataTable().columns().column(column).visible(true);
  );

加载剩余的行

var tbody = $("#tbody-" + $this.attr("data-parent-id"));
var dt = tbody.parents(".bizon-datatable").DataTable();
$(result).filter("tr").each(function (i, v) 
  dt.row.add($(v));
);

tbody.append(result);

【参考方案1】：

关键是要了解each 会针对选择器运行时找到的一组项目执行。因此，如果您最初有 10 行并且 each 执行，它将应用于 10 行，并且以后添加的任何行不会具有 each 应用的条件。

filter 也是如此。它适用于选择器执行时选择器返回的元素，而不适用于以后添加的任何内容。选择器仅选择在其运行时匹配的 DOM 元素，并且不适用于任何将来添加的 DOM 元素。因此，如果要对所有当前 DOM 元素应用过滤器或其他条件，则必须在添加元素后重新选择 DOM 元素。

要解决此问题，您需要在添加行后重新应用 filter，如果已添加行，则需要重新运行 each。