ajax 加载后更新 Datatables 列搜索下拉框答案

【问题标题】：Update Datatables column searching dropdownbox after ajax loadajax 加载后更新 Datatables 列搜索下拉框
【发布时间】：2021-02-15 13:24:16
【问题描述】：

我在我的数据表中添加了一个带有单独列搜索 (https://datatables.net/examples/api/multi_filter_select.html) 的过滤功能，该功能运行良好。该表还有一个用于重新加载表数据的按钮。按钮触发代码如下：

table.ajax.url("foo").load();

它正确更新表数据。现在，我想用新的列数据更新搜索下拉框。我想清空下拉框，例如 select.empty() 然后填充框，但不确定如何。我觉得这个更新过程应该写在“rowCallback”中。

【问题讨论】：

标签： datatables

【解决方案1】：

总结

要在每次 ajax 调用后重建下拉菜单，这里有一种方法：

您可以在 DataTables 之外使用 jQuery ajax 调用来获取数据，而不是使用 DataTables ajax 选项。
使用 jQuery done 函数填充表格，并在每次 ajax 调用后重新构建下拉列表。

此方法可确保在进行任何其他处理之前已获取 ajax 数据。

演练

假设我们有一个这样的按钮：

<button type="button" onclick="fetchData();">Reload Data</button>

还有一个像这样的 HTML 表格：

<table id="example" class="display" style="width:100%">
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>  <!-- you may need more footer cells in your table -->
        </tr>
    </tfoot>
</table>

这里是相关的fetchData 函数，它清除所有现有数据，然后用新获取的数据重新填充表：

function fetchData() {
  $.ajax({
    url: [your url goes here],  // your URL here
    context: document.body
  }).done(function( data ) {
    var table = $('#example').DataTable();
    table.clear();
    table.rows.add(data);
    buildSelectLists();
    table.draw();
  });
}

重建选择列表的功能与 DataTables 示例解决方案中的逻辑相同：

function buildSelectLists() {
  
  $('#example').DataTable().columns().every(function() {
    var column = this;

    var select = $('<select><option value=""></option></select>')
      .appendTo($(column.footer()).empty())
      .on('change', function() {

        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );
        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d, j) {
      select.append('<option value="' + d + '">' + d + '</option>')
    });
  });
}

最后，DataTable 被定义在一个“文档就绪”函数中：

$(document).ready(function() {

  $('#example').DataTable({
    // your options here - but no need for the ajax or data options
    "initComplete": function() {
      fetchData(); // make sure the table contains data, when it is created
    }
  });

});

或者：

您可以使用 DataTables ajax 选项获得类似的结果，该选项利用了一个函数：

示例（取自documentation here）：

$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
    );
  }
} );

我认为在这种情况下，将ajax 调用保留在自己的单独函数中会更简洁一些。

【讨论】：

您的解决方案效果很好！非常感谢！