如何在Bootstrap/DataTable中正确重载表格？

原编辑代码 #

function editRow(){
    var catProg = document.getElementById('editCatProg_Input').value;
    var catUser = document.getElementById('editCatUser_Input').value;
    var catPass = document.getElementById('editCatPass_Input').value;
    var catInUso = document.getElementById('editCatInUso_Input').value;
    var catDesc = document.getElementById('editCatDesc_Input').value;
    var catUltimo = document.getElementById('editCatUltimo_Input').value;
    var catDat = document.getElementById('editCatDat_Input').value;

    $.ajax({
        url: 'UpdateRow.php',
        type: 'POST',
        data: { 
            CatProg: catProg,
            CatUser: catUser,
            CatPass: catPass,
            CatInUso: catInUso,
            CatDesc: catDesc,
            CatUltimo: catUltimo,
            CatDat: catDat
        },
        dataType: "text",
        success: function(result){
            // relaod (fetch db again)
            window.location.replace(window.location.pathname + window.location.search + window.location.hash);
        },
        error: function(){
            alert("Request did not succeed. Reload and try again.");
        }
    });
}

现有问题 #

• 编辑后整页刷新会回到第1页，无法保留当前分页位置
• 页面刷新的视觉体验不佳

可行解决方案 #

方案一：直接更新单条数据（最优，无需全量刷新）

这种方式不需要重新加载整个表格数据，仅更新编辑后的行，体验最流畅。

1. 初始化DataTable并保存实例

// 替换成你的表格ID
var table = $('#your-table-id').DataTable({
    // 你的分页、排序等配置项
});

2. 编辑按钮点击时关联表格行
   在打开编辑模态框的点击事件中，保存当前行的实例，方便后续更新：

$('.edit-btn').on('click', function() {
    // 获取当前点击按钮所在的表格行
    var row = table.row($(this).closest('tr'));
    var rowData = row.data();
    
    // 将原有数据填充到编辑表单中
    $('#editCatProg_Input').val(rowData.CatProg);
    $('#editCatUser_Input').val(rowData.CatUser);
    $('#editCatPass_Input').val(rowData.CatPass);
    $('#editCatInUso_Input').val(rowData.CatInUso);
    $('#editCatDesc_Input').val(rowData.CatDesc);
    $('#editCatUltimo_Input').val(rowData.CatUltimo);
    $('#editCatDat_Input').val(rowData.CatDat);
    
    // 将行实例绑定到模态框上
    $('#edit-modal').data('row', row);
});

3. 修改editRow函数的成功回调

function editRow(){
    var catProg = document.getElementById('editCatProg_Input').value;
    var catUser = document.getElementById('editCatUser_Input').value;
    var catPass = document.getElementById('editCatPass_Input').value;
    var catInUso = document.getElementById('editCatInUso_Input').value;
    var catDesc = document.getElementById('editCatDesc_Input').value;
    var catUltimo = document.getElementById('editCatUltimo_Input').value;
    var catDat = document.getElementById('editCatDat_Input').value;
    
    // 获取之前绑定的行实例
    var row = $('#edit-modal').data('row');

    $.ajax({
        url: 'UpdateRow.php',
        type: 'POST',
        data: { 
            CatProg: catProg,
            CatUser: catUser,
            CatPass: catPass,
            CatInUso: catInUso,
            CatDesc: catDesc,
            CatUltimo: catUltimo,
            CatDat: catDat
        },
        dataType: "json", // 要求后端返回JSON格式的更新后数据
        success: function(result){
            // 更新该行数据，draw(false)不会重置分页/排序状态
            row.data([
                result.CatProg,
                result.CatUser,
                result.CatPass,
                result.CatInUso,
                result.CatDesc,
                result.CatUltimo,
                result.CatDat,
                // 操作列的按钮HTML，和初始化时保持一致
                '<button class="edit-btn">编辑</button> <button class="delete-btn">删除</button>'
            ]).draw(false);
            
            // 关闭编辑模态框
            $('#edit-modal').modal('hide');
        },
        error: function(){
            alert("Request did not succeed. Reload and try again.");
        }
    });
}

4. 后端UpdateRow.php调整
   更新数据库后，返回更新后的行数据：

// 执行数据库更新操作（省略具体逻辑）
// 返回JSON格式的更新数据
echo json_encode([
    'CatProg' => $_POST['CatProg'],
    'CatUser' => $_POST['CatUser'],
    'CatPass' => $_POST['CatPass'],
    'CatInUso' => $_POST['CatInUso'],
    'CatDesc' => $_POST['CatDesc'],
    'CatUltimo' => $_POST['CatUltimo'],
    'CatDat' => $_POST['CatDat']
]);

方案二：使用ajax.reload()保留分页状态

如果你的DataTable是通过Ajax加载数据源的，直接用官方API刷新数据并保留当前状态。

1. 确保DataTable使用Ajax初始化

var table = $('#your-table-id').DataTable({
    ajax: 'fetch-data.php', // 从该接口获取表格数据
    columns: [
        { data: 'CatProg' },
        { data: 'CatUser' },
        { data: 'CatPass' },
        { data: 'CatInUso' },
        { data: 'CatDesc' },
        { data: 'CatUltimo' },
        { data: 'CatDat' },
        { 
            data: null,
            render: function(data) {
                return '<button class="edit-btn">编辑</button> <button class="delete-btn">删除</button>';
            }
        }
    ],
    // 其他分页、排序配置
});

2. 修改editRow的成功回调

function editRow(){
    var catProg = document.getElementById('editCatProg_Input').value;
    // 其他变量获取（略）

    $.ajax({
        url: 'UpdateRow.php',
        type: 'POST',
        data: { 
            // 提交的参数（略）
        },
        dataType: "text",
        success: function(result){
            // 重新加载数据，第二个参数false表示不重置分页状态
            table.ajax.reload(null, false);
            $('#edit-modal').modal('hide');
        },
        error: function(){
            alert("Request did not succeed. Reload and try again.");
        }
    });
}

补充：替换表格HTML的正确方式 #

如果之前尝试用Ajax获取新表格替换旧表格失败，可按以下步骤操作：

success: function(result){
    // 销毁旧的DataTable实例
    table.destroy();
    // 替换表格内容
    $('#your-table-id').html(result);
    // 重新初始化DataTable
    table = $('#your-table-id').DataTable({
        // 原有配置
    });
}

但这种方式不如前两种方案高效，仅作为备选。

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