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

Posted 2023-05-07

【中文标题】使用 jQuery ajax 调用重新加载 DataTable 内容

【英文标题】：Reload DataTable content with jQuery ajax call

【发布时间】：2021-04-29 19:35:20

【问题描述】：

我有一个 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)
...

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

【问题讨论】：

尝试使用draw()，datatables.net/reference/api/draw()

@ian 不，它不起作用

分享完整代码，你是怎么定义你的数据表的。为什么要尝试重新定义它？你的网址是静态的吗？

***.com/questions/46912870/…

【参考方案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();
      
    
  )

【参考方案2】：

这是我的结构：

假设：

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

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

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 查询参数），这应该可以工作。