Ajax成功后向现有DataTable追加行丢失功能的问题排查

首先看你代码里的一个明显错误：你前面操作的表格是#grdAll，但最后重新初始化DataTable时却用了#grdAllTokens——ID不一致直接导致原来的表格没有被正确初始化，这是功能丢失的首要原因。除此之外，直接用jQuery的empty()和append()操作DOM的方式，也会破坏DataTable的内部数据状态，导致排序、样式等功能无法识别新添加的行。

下面提供两种正确的解决方式：

方法一：使用DataTable API更新数据（推荐） #

这种方式不会破坏DataTable的内部状态，是官方推荐的更新数据方式：

$(document).ready(function () { 
    // 初始化DataTable并保存实例，方便后续操作
    var table = $('#grdAll').DataTable({
        // 这里填写你原有的配置项，比如排序、分页等
        "retrieve": true
    });

    $(document).on('click', '.btn-primary', function(evt){ 
        evt.preventDefault() 
        $.ajax({ 
            type: "POST", 
            url: "hello.aspx/ProcessMe", 
            data: '{id: "' + $(this).prev().val() + '" ,dept:"' + $(this).prev().prev().val() + '"}', 
            contentType: "application/json; charset=utf-8", 
            dataType: "json", 
            success: function (data) { 
                if (typeof data != "undefined" && data.d !== null) { 
                    // 1. 清除表格现有数据
                    table.clear();

                    // 2. 更新表头（如果需要替换原有表头）
                    $('#grdAll thead').empty();
                    $('#grdAll thead').append("<tr><th>blah</th><th>blah</th>...</tr>");

                    // 3. 循环添加新数据行
                    // 注意：根据你的data.d结构调整循环逻辑，这里假设每3个元素对应一行
                    for (var i = 0; i < data.d.length; i += 3) { 
                        var rowContent = [
                            data.d[i + 1],
                            data.d[i + 2],
                            // 最后一列的HTML内容
                            `<input type='hidden' name='blah' id='blah' value='${data.d[i]}'>
                             <a id='lnkProcess' class='btn btn-primary btn-round icnsml' title='Process'>
                                 <i class='fa fa-play-circle'></i>
                             </a>`
                        ];
                        // 使用DataTable API添加行
                        table.row.add(rowContent);
                    }

                    // 4. 重新绘制表格，应用所有变更
                    table.draw();
                }
            } 
        }); 
    }); 
});

方法二：销毁旧实例后重新初始化 #

如果你需要完全重构表格结构，可以用这种方式：

$(document).ready(function () { 
    $(document).on('click', '.btn-primary', function(evt){ 
        evt.preventDefault() 
        $.ajax({ 
            type: "POST", 
            url: "hello.aspx/ProcessMe", 
            data: '{id: "' + $(this).prev().val() + '" ,dept:"' + $(this).prev().prev().val() + '"}', 
            contentType: "application/json; charset=utf-8", 
            dataType: "json", 
            success: function (data) { 
                if (typeof data != "undefined" && data.d !== null) { 
                    // 1. 销毁已存在的DataTable实例（如果有）
                    if ($.fn.DataTable.isDataTable('#grdAll')) {
                        $('#grdAll').DataTable().destroy();
                    }

                    // 2. 清空表格并构建完整的HTML结构（必须包含thead和tbody）
                    var tableHtml = `
                        <thead>
                            <tr><th>blah</th><th>blah</th>...</tr>
                        </thead>
                        <tbody>
                    `;
                    for (var i = 0; i < data.d.length; i += 3) { 
                        tableHtml += `
                            <tr>
                                <td>${data.d[i + 1]}</td>
                                <td>${data.d[i + 2]}</td>
                                <td>
                                    <input type='hidden' name='blah' id='blah' value='${data.d[i]}'>
                                    <a id='lnkProcess' class='btn btn-primary btn-round icnsml' title='Process'>
                                        <i class='fa fa-play-circle'></i>
                                    </a>
                                </td>
                            </tr>
                        `;
                    }
                    tableHtml += '</tbody>';
                    $('#grdAll').html(tableHtml);

                    // 3. 重新初始化DataTable
                    $('#grdAll').DataTable({
                        // 填写你的配置项
                        "retrieve": true
                    });
                }
            } 
        }); 
    }); 
});

关键注意事项 #

1. ID一致性：确保所有操作的表格ID完全一致，不要像之前那样混淆#grdAll和#grdAllTokens。
2. 表格结构规范：DataTable要求表格必须包含<thead>和<tbody>标签，否则排序等核心功能无法正常工作。
3. 避免直接DOM操作：尽量使用DataTable提供的API来更新数据，这能保证表格的内部状态和DOM结构同步，不会丢失功能。

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