如何在DataTables的drawCallback（页面切换）事件中更新列值？

核心问题分析 #

你遇到的两个问题根源在于：

• 调用invalidate().draw()会触发drawCallback，未做处理的话会陷入"更新→触发回调→再更新"的无限循环
• 直接调用cell().draw()会触发全局重绘，默认重置分页回到第一页

解决方案：标记已处理单元格 + 仅同步数据源不触发全局重绘 #

通过以下两点修改即可解决：

1. 给已更新的单元格添加标记，避免重复处理
2. 仅更新DOM和DataTable内部数据源，不调用会触发回调的draw()方法

修改后的代码示例：

$(document).ready(function() {
    var table = $('#dataTables-ordini').DataTable({
            "aoColumnDefs": [
                    { "sType": 'numeric' },
                    { "sType": 'string' },
                    { "sType": 'date' },
                    { "sType": 'numeric' },
                    { "sType": 'string' },
                    { "sType": 'numeric' },
                    { "sType": 'string' } ],
            order: [[ 0, "desc" ]],
            responsive: true,
            drawCallback: function(settings) {
                // 用DataTable API获取目标列的可见单元格（假设目标列是第5列，索引为4）
                table.columns(4).nodes().each(function(node) {
                    var cell = $(node);
                    var id = cell.attr('myid');
                    
                    // 只处理未加载且内容为"ND"的单元格
                    if (cell.html() === 'ND' && !cell.attr('data-loaded')) {
                        $.get('get_data.php?id='+id, function(data){
                            // 标记单元格已加载，避免后续回调重复处理
                            cell.html(data).attr('data-loaded', 'true');
                            // 同步DataTable内部数据源，此操作不会触发drawCallback
                            table.cell(node).data(data);
                        });
                    }
                });
            }
    });
});

关键细节说明 #

• 标记已处理单元格：通过data-loaded属性标记，确保每个单元格只被请求一次，彻底避免循环问题
• 使用DataTable API获取单元格：table.columns(索引).nodes()能精准获取当前页可见的目标列单元格，比原生DOM选择器更适配DataTable的分页和响应式特性
• 仅同步数据源：table.cell(node).data(data)只更新DataTable内部的数据集，不会触发全局重绘，因此不会跳回第一页，同时保证表格的排序、筛选等功能能识别新数据

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