Question

我有以下情况：

用户可以通过两种方式访问具有DataTable的网站：

正常，没有设置过滤器，您将看到每个条目。
用户应仅查看带有预定义过滤器的条目

到目前为止，我已完成设置过滤器的值以及列的搜索值，方法是在initComplete方法中设置它们，但DataTable在之后不会更新设置过滤器，这对我来说是神秘的，因为DataTable在按F5后知道设置过滤器值...

所以我的问题是：如何设置默认过滤器值，并在完成初始化后告诉DataTable更新？

我的DataTable-Initialization如下所示：

$('#table-data').DataTable({
  processing: true,
  serverSide: true,
  language: dataTablesGerman,
  initComplete: function () {
    this.api().columns().every(initColumnFilter);
    const json = JSON.parse($('[name="table_settings"]').val());
    const dt = this.api();
    dt.columns().every(function (idx) {
      const column = this;
      if (json[idx] !== null) {
        const $current = $('input:not(.datetimerange), select', this.footer());
        const value = json[idx].search;
        $current.val(value);
        column.search(value).draw();
      }
    });
  }
});

设置如下所示（这些设置来自PHP响应，存储在隐藏字段$('[name="table_settings"]').val()行）：

const settings = [
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    { search: 1 } // this will be set to a select box
];

Answer 1

在进行了一些其他实验后，我们可以通过延迟1ms再次绘制色谱柱。这使得DataTable应用了过滤器。

所以代码现在看起来像这样：

$('#table-data').DataTable({
  processing: true,
  serverSide: true,
  language: dataTablesGerman,
  initComplete: function () {
    this.api().columns().every(initColumnFilter);
    const json = JSON.parse($('[name="table_settings"]').val());
    const dt = this.api();
    if (json !== null && json.length > 0) {
      dt.columns().every(function (idx) {
        const column = this;
        if (json[idx] !== null) {
          const $current = $('input:not(.datetimerange), select', this.footer());
          const value = json[idx].search;
          $current.val(value);
          column.search(value).draw();
          window.setTimeout(function () {
            column.draw();
          }, 1);
        }
      });
    }
  }
});

如何设置默认过滤器值和过滤条目数据

1 个答案: