服务端模式DataTables如何同时在表格与Div展示同一份数据？

问题根源是自定义success回调覆盖了DataTables内置的服务器端数据处理逻辑，导致表格无法正常解析和渲染数据，一直处于加载状态。要同时在表格和div中展示数据，推荐使用DataTables提供的回调函数，而非重写ajax的success。

方案：使用drawCallback回调 #

这个回调会在表格每次完成绘制（初始化、搜索、排序等操作后）触发，此时可以安全获取表格数据并渲染到div区域：

var table = $("table").DataTable({
    searching: true, 
    paging: false, 
    info: false,
    ordering: true,
    processing: true,
    serverSide: true,
    ajax: {
        url: 'data.php',
        type: 'POST'
    },
    // 表格绘制完成后执行
    drawCallback: function(settings) {
        // 获取当前表格的所有数据（转为数组方便遍历）
        var tableData = this.api().data().toArray();
        // 目标div容器
        var $targetDiv = $('div');
        // 清空原有内容
        $targetDiv.empty();

        // 遍历数据生成div内容
        tableData.forEach(function(row) {
            // 注意：row的结构要和后端返回的data字段一致
            // 如果后端返回的是对象（比如{name: "John Doe", date: "03-07-2023"}），用row.name/row.date
            // 如果后端返回的是数组（比如["John Doe", "03-07-2023"]），用row[0]/row[1]
            var nameEl = $('<p>').append(
                $('<span>').text('Name:'),
                $('<span>').text(row.name)
            );
            var dateEl = $('<p>').append(
                $('<span>').text('Date:'),
                $('<span>').text(row.date)
            );
            $targetDiv.append(nameEl, dateEl);
        });
    }
});

关键说明 #

1. 不要自定义ajax的success回调：服务器端模式下，DataTables需要自行处理返回的draw、recordsTotal等必填参数，重写success会打断这个流程。
2. 字段匹配：确保代码中row.name/row.date和后端返回的data数组中每条数据的字段名/索引一致。
3. 实时同步：drawCallback会在搜索、排序等操作后自动触发，保证div内容和表格数据实时同步。

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