DataTables报错：Cannot reinitialise DataTable，无法填充JSON数据

你遇到的这个报错很常见——每次调用filtre()函数时，你都在尝试重新初始化已经存在的DataTable实例，而DataTables默认不允许重复初始化同一个表格，所以就抛出了这个警告。

先看看你的原始代码里的问题：

function filtre() { 
  var status = document.getElementById("filtre").value; 
  // 这里的$.get是多余的，DataTables的ajax会自己发起请求
  $.get("users/liste/" + status, function (data) { 
    // 每次调用都会执行这句，重复初始化表格
    $("#example2_wrapper").DataTable({ 
      "processing": true, 
      "serverSide": true, 
      "ajax": "../admin/users/liste/" + status, 
      "aoColumns": [ 
        {mData: "id"}, 
        {mData: "name"}, 
        {mData: "user_level"}, 
        {mData: "location"}, 
        {mData: "gender"}, 
        {mData: "status"}, 
        {mData: "islem"} 
      ] 
    }); 
  }); 
}

而且里面的$.get请求完全是多余的，DataTables的ajax配置会自动处理数据请求，不需要额外发起一次GET请求。

下面给你两种靠谱的解决方案：

方案一：先销毁已有实例，再重新初始化 #

如果你的表格配置可能有变化（不只是数据源），可以先检查是否存在DataTable实例，销毁后再重建：

function filtre() {
  var status = document.getElementById("filtre").value;
  var tableElement = $("#example2_wrapper");
  
  // 检查表格是否已初始化，若已存在则销毁
  var existingTable = tableElement.DataTable();
  if (existingTable) {
    existingTable.destroy();
  }
  
  // 重新初始化表格
  tableElement.DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "../admin/users/liste/" + status,
    "aoColumns": [
      {mData: "id"},
      {mData: "name"},
      {mData: "user_level"},
      {mData: "location"},
      {mData: "gender"},
      {mData: "status"},
      {mData: "islem"}
    ]
  });
}

方案二：复用已有实例，更新数据源（推荐） #

如果只是需要切换数据源（比如根据status过滤），这种方法更高效，不需要销毁重建表格，直接更新AJAX地址并刷新数据即可：

首先，在页面加载时只初始化一次表格：

// 全局存储表格实例
var userTable;

// 页面加载完成后初始化表格
$(document).ready(function() {
  // 这里填默认的status值，比如空字符串或者初始状态
  var defaultStatus = "";
  
  userTable = $("#example2_wrapper").DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "../admin/users/liste/" + defaultStatus,
    "aoColumns": [
      {mData: "id"},
      {mData: "name"},
      {mData: "user_level"},
      {mData: "location"},
      {mData: "gender"},
      {mData: "status"},
      {mData: "islem"}
    ]
  });
});

然后修改filtre()函数，只更新数据源并刷新：

function filtre() {
  var status = document.getElementById("filtre").value;
  // 更新表格的AJAX请求地址，并重新加载数据
  userTable.ajax.url("../admin/users/liste/" + status).load();
}

这种方法的优势是避免了销毁重建的性能开销，表格的状态（比如分页、排序）也能更好地保留，体验更流畅。

内容的提问来源于stack exchange，提问作者Mustafa UYSAL