ajax加载后更新数据表列搜索下拉框

如何解决ajax加载后更新数据表列搜索下拉框

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

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

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

解决方法

总结

要在每次 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 调用保留在其自己的单独函数中会更简洁一些。