如何在AJAX更新或插入调用后刷新DataTable数据表？

要解决这个问题，我整理了两种实用方案，你可以根据自己的代码结构选择合适的方式：

方案一：让DataTable通过AJAX加载数据源（推荐） #

这种方式最贴合DataTable的设计逻辑，后续刷新操作会非常简洁高效。

步骤1：修改DataTable初始化代码 #

把原来PHP直接渲染tbody的方式，改成让DataTable通过AJAX请求动态获取数据。在页面的JS代码里完成表格初始化：

$(document).ready(function() {
    // 初始化DataTable并配置AJAX数据源
    var catTable = $('#catTbl').DataTable({
        ajax: {
            url: '../processes/getLists.php', // 指向你的数据接口
            type: 'GET',
            dataSrc: 'data' // 对应后端返回JSON中的数据字段名
        },
        columns: [
            { data: 'id' }, // 和数据库返回的ID字段对应
            { data: 'title' } // 和数据库返回的Title字段对应
        ]
    });
});

步骤2：调整后端接口返回JSON格式 #

修改你的getLists.php，让它返回标准的JSON结构，而非直接输出HTML：

<?php
// 引入必要的数据库连接和类文件
include "../你的数据库连接文件.php";
include "../processes/getLists.php";

$process = new getLists();
$catData = $process->getCatForTbl(); // 假设该方法返回数组形式的分类列表

// 返回DataTable所需的JSON结构
echo json_encode([
    'data' => $catData
]);
?>

提示：要确保getCatForTbl()返回的数组中，每个元素都包含id和title键，和前端配置的columns对应上

步骤3：AJAX操作后刷新表格 #

在你的更新/插入操作的AJAX成功回调里，只需调用DataTable实例的ajax.reload()方法即可：

// 示例：AJAX更新分类的代码
$.ajax({
    url: '../processes/updateCat.php', // 你的更新接口
    method: 'POST',
    data: {
        id: 1,
        title: '更新后的分类标题'
    },
    success: function(response) {
        // 刷新DataTable，可选添加回调提示用户
        catTable.ajax.reload(function() {
            alert('分类已成功更新！');
        });
    }
});

方案二：保持原有PHP渲染方式，手动更新tbody #

如果不想调整数据源加载逻辑，也可以通过重新获取表格HTML的方式实现刷新：

步骤1：抽取表格行的渲染逻辑 #

把原来getLists.php中getCatForTbl()输出的<tr>行逻辑单独抽成一个文件，比如getCatTblRows.php，这个文件只输出tbody里的行内容，不包含其他冗余标签。

步骤2：在AJAX成功后更新表格 #

在更新/插入的AJAX回调里，清空原有tbody内容，重新获取最新的行HTML并插入，最后通知DataTable重新绘制：

$.ajax({
    url: '../processes/updateCat.php',
    method: 'POST',
    data: { /* 你的更新数据 */ },
    success: function(response) {
        // 清空现有表格内容
        $('#catTbl tbody').empty();
        
        // 重新获取最新的表格行HTML
        $.get('../processes/getCatTblRows.php', function(rowsHtml) {
            // 插入新的行内容
            $('#catTbl tbody').html(rowsHtml);
            
            // 通知DataTable重新绘制表格
            $('#catTbl').DataTable().draw();
        });
    }
});

注意事项 #

• 无论用哪种方案，都要确保DataTable的初始化代码放在$(document).ready()中，保证DOM加载完成后再执行
• 如果用方案一，页面中的<tbody>可以留空，DataTable会自动填充数据
• 使用ajax.reload()时，默认会保留当前分页、排序状态；如果想重置到第一页，可以传参数：catTable.ajax.reload(null, false)

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