使用 jQuery ajax 调用重新加载 DataTable 内容

Question

我有一个 DataTable，我想根据用户在表单中选择的内容过滤它的内容。这是我使用的代码示例：

$(document).on('click', '#filter_btn', filterList)

function filterList (event) {

  event.preventDefault()

  var form_data = $('.filter-form').serialize()
  var url = window.location.origin + '/my-amazing-url/'

  $('#dataTable-x').DataTable({
    ajax: {
       url: url,
       type: 'get',
       dataType: 'json',
       data: form_data
    }
  })

  $('#dataTable-x').DataTable().ajax.reload()

}

在服务器端 Django 返回以下内容：

...
data = self.get_queryset().values()
    return JsonResponse(data)
...

但什么都没有改变。我应该如何修改代码？谢谢。

Answer 1

DataTables 可以有它的 ajax 源，只需要一个 URL。 Documentation - Ajax source.

或

您可以使用自己的表单来选择一些选择数据以提供给 DataTables。

在这种情况下，您必须通过 ajax 成功回调向 DataTables 提供新数据。这个答案的一半来自other answer。

$(document).on('click', '#filter_btn', filterList)

function filterList (event) {

  event.preventDefault()

  var form_data = $('.filter-form').serialize()
  var url = window.location.origin + '/my-amazing-url/'

  $.ajax: {
      url: url,
      type: 'get',
      dataType: 'json',
      data: form_data,
      success: function(response){

        // From the "other answer"

        $('#dataTable-x').clear().draw();
        $('#dataTable-x').rows.add({data:response.data}); // Where response.data is an array
        datatable.columns.adjust().draw();
      }
    }
  })
}

Answer 2

这是我的结构：

假设：

1. 您有一个表单：<form id="filter-form">..</form>。这里我使用的是表单的 ID，而不是类名。

2. 在我的“文档就绪”脚本中，我有以下内容：

var form_data;

$( "#filter-form" ).submit(function( event ) {
  event.preventDefault();
  form_data = $( this ).serializeArray(); 
  table.ajax.reload();
});

注意使用# 对表单ID 的引用。我更喜欢这个而不是使用 css 类名。

上述脚本负责捕获表单数据，然后使用table.ajax.reload() 重新运行 DataTables ajax 调用。

对于表格本身，我对 ajax 数据使用了一个函数：

var table = $('#example').DataTable( {
  ajax: { 
    method: "POST", // or GET if you prefer
    url: your URL here!
    data: function() { 
      return form_data 
    }
  },
  // the rest of your table options here
  });

注意事项：

表被命名为var table = ... - 这样表就可以被我展示的第一个片段使用：table.ajax.reload()。

data 选项是一个函数。这是特定于 DataTables 的（它不是底层 jQuery ajax 语法的一部分）。有关这方面的更多信息，请参阅 DataTables 官方文档中的 here。

假设您在服务器上正确处理 POST 表单数据（或 GET 查询参数），这应该可以工作。