Django通过AJAX加载JSON到Bootstrap表格点击后数据丢失问题求解

云上老周

2026-9-25

点击表格数据消失问题修复方案

该现象不属于正常情况，核心问题出在表格ID和DataTables插件的默认初始化规则冲突：
大部分Bootstrap前端模板会默认对ID为dataTable的元素自动初始化DataTables插件，你手动通过AJAX向tbody插入的内容不属于DataTables的托管数据，点击表格触发排序、重绘等操作时，插件会自动清空非托管内容，导致数据消失。

两种修复方案

方案1：不需要DataTables功能（快速修复）

直接修改表格的ID，避免被插件自动识别即可，无需修改现有AJAX逻辑：

<!-- 把原table标签的id从dataTable改成自定义的非冲突值 -->
<table class="table table-sm" id="schemaTable" width="100%" cellspacing="0">

方案2：需要使用DataTables的排序/搜索/分页能力

删除你自己编写的BindTables相关代码，直接用DataTables原生的数据源配置加载接口数据，代码示例：

$(document).ready(function () {
    $("#dataTable").DataTable({
        // 接口配置
        ajax: {
            url: "http://127.0.0.1:8000/api/v1/table/",
            type: "GET", // 后续改POST直接修改这个参数即可
            dataSrc: "results" // 指定从接口返回的哪个字段取表格数据
        },
        // 列和返回字段的映射
        columns: [
            { data: "schema" },
            { data: "table" }
        ]
    });
});

这种方式所有表格数据都由DataTables托管，点击表格触发操作时不会再出现数据消失的问题。