AJAX成功后刷新Gridjs Table失效，表格空白问题求助

当前场景：

• Gridjs表格初始化正常，手动刷新页面能正常显示所有内容
• AJAX操作成功后，用$( "#gridjs_table" ).load(window.location.href + " #gridjs_table" )刷新表格容器，但刷新后表格变为空白

问题原因 #

jQuery的load()方法默认不会执行加载内容中的<script>标签。你当前的表格初始化脚本包含在#gridjs_table容器内，加载后脚本未被执行，Gridjs无法重新渲染表格，导致空白。

解决方案 #

方法1：修改load逻辑，强制执行加载的脚本 #

调整AJAX的success回调，在加载完成后手动提取并执行容器内的脚本：

success: function (data) {
    console.log(data);
    $("#gridjs_table").load(window.location.href + " #gridjs_table > *", function() {
        // 遍历加载内容中的所有script标签并执行
        $(this).find("script").each(function() {
            eval($(this).text());
        });
    });
}

说明：

• 用#gridjs_table > *确保只加载容器内的子元素，避免重复嵌套#gridjs_table
• 通过eval()执行脚本，让Gridjs初始化代码重新运行，渲染表格

方法2：用Gridjs原生API更新数据（更推荐） #

这种方式不需要重新加载DOM，直接通过Gridjs的API更新数据，效率更高：

1. 先把Grid实例保存到变量中（修改表格初始化代码）：

<script>
// 保存实例到全局作用域，方便后续调用
const bookGrid = new gridjs.Grid({
    columns: [
        // 原有的列配置...
    ],
    data: [<?php echo $data_implode; ?>],
    // 其他配置（排序、搜索、分页等）...
}).render(document.getElementById("wrapper"));
</script>

2. 修改AJAX逻辑，请求最新数据并更新表格：

// 建议后端新增一个接口，直接返回表格所需的JSON格式数据
$.ajax({
    url: "get_table_data.php", // 替换为你的数据接口地址
    type: "GET",
    success: function (newData) {
        console.log(newData);
        // 更新表格数据并强制渲染
        bookGrid.updateConfig({
            data: newData
        }).forceRender();
    }
});

说明：

• 这种方式避免了重复加载DOM和执行脚本，是Gridjs官方推荐的无刷新更新方案
• 如果暂时无法新增接口，也可以从AJAX返回的页面内容中提取表格数据（比如通过解析HTML获取data_implode对应的内容），但不如单独接口高效

内容的提问来源于stack exchange，提问作者Bob D. Builder