在jQuery中能否在Ajax后使用DataTables插件？表格重载无变化怎么办？

问题1：在jQuery环境下，是否可以在Ajax函数执行完成后使用DataTables插件？ #

当然可以！这其实是DataTables非常常见的使用场景——通过Ajax异步拉取数据后，再初始化表格完成渲染。不过要注意几个关键细节：

• 确保jQuery脚本在DataTables脚本之前加载，毕竟DataTables是依赖jQuery运行的；
• 在Ajax的success回调里初始化表格时，要确认目标表格元素（比如#dataTable）已经存在于DOM中；
• 如果后续需要更新表格数据，别直接重复调用dataTable()，要用DataTables提供的API方法来操作（这点刚好对应你的第二个问题）。

问题2：重载DataTables时未产生任何变化的解决方案 #

看了你提供的代码片段，我梳理出几个可能导致重载失效的问题，以及对应的修复方案：

1. 重复初始化的核心问题 #

如果你的表格已经初始化过一次，直接再次调用$('#dataTable').dataTable(...)不会触发重载——DataTables默认不会覆盖已存在的实例。这里有两种靠谱的处理方式：

方式一：用DataTables API更新数据（推荐）

先通过DataTable()（注意大写D）获取表格实例，再依次清空旧数据、添加新数据、重新绘制：

$.ajax({
  url: '../CustomJS/Service.asmx/GetCustomer',
  method: 'POST',
  dataType: 'json',
  success: function (data) {
    // 获取已初始化的表格实例
    var table = $('#dataTable').DataTable();
    // 清空旧数据
    table.clear();
    // 注入新数据
    table.rows.add(data);
    // 重新渲染表格
    table.draw();
  }
});

方式二：销毁旧实例后重新初始化

如果需要完全重置表格配置，可以先销毁旧实例，再重新初始化：

$.ajax({
  url: '../CustomJS/Service.asmx/GetCustomer',
  method: 'POST',
  dataType: 'json',
  success: function (data) {
    // 先判断表格是否已初始化，是则销毁
    if ($.fn.DataTable.isDataTable('#dataTable')) {
      $('#dataTable').DataTable().destroy();
    }
    // 重新初始化表格
    $('#dataTable').dataTable({
      data: data,
      ordering: true, // 注意：DataTables没有sorting参数，正确参数是ordering
      searching: true,
      columns: [
        {
          'data': 'CustomerID',
          'sortable': false,
          'searchable': false,
          "render": function (id) {
            return '<input type="checkbox" name="custSelect" data-columnIndex="'+id+'"/>';
          }
        },
        {'data':'CustomerID'},
        {'data':'CustomerName'},
        {'data':'CustomerMobile'} // 确保字段名完整、语法闭合
      ]
    });
  }
});

2. 代码中的参数与语法错误 #

• 你写的sorting: true是错误的，DataTables的正确参数是ordering: true；
• 检查columns数组的最后一项，你的代码里{'data':'CustomerMobil...' }存在语法不完整问题，要确保字段名正确且对象完全闭合；
• 渲染函数里的<和>可以直接写成<和>，JS字符串里不需要转义（除非数据有特殊需求）。

3. 数据格式验证 #

务必确认Ajax返回的data是对象数组格式，比如：

[
  {"CustomerID": 1, "CustomerName": "张三", "CustomerMobile": "13xxxxxxxxx"},
  {"CustomerID": 2, "CustomerName": "李四", "CustomerMobile": "13xxxxxxxxx"}
]

如果返回数据是嵌套结构（比如data.d），要调整为data.d来获取实际数据集合。

内容的提问来源于stack exchange，提问作者Mohideen Asraf