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

【问题标题】：How to set default filter values and filter entries datatable如何设置默认过滤器值和过滤器条目数据表
【发布时间】：2018-04-17 12:59:13
【问题描述】：

我有以下场景：

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

正常，没有设置过滤器，你会看到每个条目。
用户应该只看到带有预定义过滤器的条目

到目前为止，我已经通过在 initComplete-method 中设置过滤器的值和列的搜索值来完成它们，但是在设置过滤器后 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
];

【问题讨论】：

您可能需要使用更新的设置重新初始化数据表。可能会破坏它并再次初始化，如this
没用，但找到了另一个解决方案。似乎是时间问题，所以我添加了这一行并执行了以下操作：window.setTimeout(function () { column.draw(); }, 1);

标签： javascript php datatables-1.10

【解决方案1】：

经过其他一些实验后，我们可以让它再次绘制列，延迟为 1 毫秒。这使得 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);
        }
      });
    }
  }
});

【讨论】：