DataTables中node.innerHTML与cell.data()的差异：排序失效问题

需求背景 #

创建作为「排名」列的索引列，DataTables初始化完成后为行分配固定索引，且在按其他列重新排序表格时保留该索引。

两种实现方式 #

• 方式1：设置单元格的data属性

$('#example').on('init.dt', function() {
  console.log('init');
  let i = 1;
  $('#example').DataTable().cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
    this.data(i++);
    });
});
var table = $('#example').DataTable({
    pageLength: 5,
    order: [[1,'asc']]
});

• 方式2：设置节点的innerHTML

$('#example').on('init.dt', function() {
   $('#example').DataTable().column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
       cell.innerHTML = i+1;
       });
});
var table = $('#example').DataTable({
    pageLength: 5,
    order: [[1,'asc']]
  });

差异原因 #

核心在于DataTables是数据驱动的组件，它维护了独立于DOM的内部数据缓存：

1. 方式1中，this.data(i++)直接将索引值写入了DataTables的内部数据模型。当点击排序时，DataTables会基于自己缓存的完整数据进行排序计算，因此能识别第一列的数值，正常触发排序逻辑。
2. 方式2中，cell.innerHTML = i+1仅修改了页面DOM的显示内容，但没有同步更新DataTables内部的数据缓存。DataTables排序时依赖的是自身维护的数据，而非DOM节点的内容，所以点击排序时，第一列在DataTables的数据模型中仍是初始的空值/默认值，自然无法按显示的索引值排序。

如果要让方式2也支持排序，需要在修改DOM的同时，调用cell().data(i+1)同步更新DataTables的内部数据。

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