Ajax请求成功后如何用新数据重绘DataTable并正确显示统计值？

看起来你在手动加载DataTable数据时遇到了几个关键问题，导致表格无数据显示。咱们一步步拆解并解决：

1. 核心错误：销毁实例后继续调用方法 #

你的success函数里先执行了table.destroy()，这会彻底销毁DataTable实例，之后的table.rows.add()和table.draw()都是在一个已经失效的对象上调用，自然不会生效。

2. ServerSide模式的冲突 #

你初始化表格时设置了"serverSide": true，这个模式下DataTable会自动向服务端发起请求，处理分页、排序、过滤等逻辑，手动调用rows.add()的方式并不适用于这个模式。

正确的实现方案 #

方案一：切换为客户端模式（更适合手动加载数据） #

如果你的场景不需要服务端处理分页/排序，把serverSide改为false，然后用以下方式更新数据：

初始化表格（修改serverSide）

var table = $('.table').DataTable({
  "serverSide": false,
  // 保留其他配置（列定义等）
});

Ajax成功后的更新逻辑

success: function(data) {
  var table = $('.table').DataTable();
  // 清空现有数据
  table.clear();
  // 注意：返回的data里，真正的行数据在data.data字段中
  table.rows.add(data.data);
  // 绘制表格，同时更新统计信息
  table.draw();
  
  // 如果你需要确保底部显示正确的recordsTotal/recordsFiltered
  var info = table.page.info();
  info.recordsTotal = data.recordsTotal;
  info.recordsFiltered = data.recordsFiltered;
}

方案二：保留ServerSide模式（让DataTable自动管理请求） #

如果你必须用服务端模式，不要手动发起Ajax请求，而是让DataTable自己处理数据加载。如果需要手动触发刷新，可以用：

// 触发表格重新加载数据
var table = $('.table').DataTable();
table.ajax.reload(function(response) {
  // 加载完成后的回调逻辑
}, false); // false表示不重置当前页码

如果需要动态修改请求参数（比如你的$length参数），可以通过ajax.data配置：

var table = $('.table').DataTable({
  "serverSide": true,
  "ajax": {
    "url": '{{ path('json', { fileName: output.fileName }) }}',
    "data": function(d) {
      // 这里可以动态添加参数，比如length
      d.length = 10; // 替换成你的动态值
    }
  }
});

额外的PHP代码优化 #

你的PHP函数存在潜在风险：如果原始JSON里没有data字段，$new会未定义，导致报错。建议提前初始化并优化循环：

public function getJson($fileName,$length) { 
  $file = 'files/'.$fileName.'.json'; 
  $input = file_get_contents($file); 
  $array = json_decode($input); 
  $newData = []; // 初始化默认值
  
  if (isset($array->data) && is_array($array->data)) {
    $newData = array_slice($array->data, 0, $length);
  }
  
  $array->data = $newData; 
  $data = json_encode($array); 
  return new Response($data);
}

小提示 #

• 你的原始Ajax返回的data已经是解析好的JSON对象（jQuery Ajax会自动解析Content-Type为application/json的响应），不需要再调用JSON.parse(data)。
• 检查浏览器控制台是否有报错，这往往能快速定位问题！

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