jQuery DataTable运行时更新data-sort属性不影响排序的问题

问题原因 #

DataTable会缓存单元格的排序数据，仅修改DOM的data-sort属性不会同步到内部缓存，调用draw()只是重绘表格，不会更新缓存里的排序值，所以排序依然用旧数据。

方案一：修改现有代码，强制DataTable更新缓存 #

修改复选框的change事件处理逻辑，在更新DOM属性后，通知DataTable重新读取该单元格的排序数据：

var dt3;
$(function(){
   dt3 = $('.dt3').DataTable();

   $('body').on('change','input.chkV1',function(){
        var $td = $(this).closest('td'); // 用closest比parents更精准定位父单元格
        var sortVal = $(this).is(':checked') ? 1 : 0;
        $td.attr('data-sort', sortVal); // DataTable读取的是DOM上的data-sort属性
        
        // 让DataTable重新读取该单元格的DOM数据并更新内部缓存
        dt3.cell($td).invalidate('dom').draw();
    });
 });

核心逻辑说明：

• cell($td)定位到复选框所在的目标单元格
• invalidate('dom')告诉DataTable放弃原有缓存，重新从DOM中读取该单元格的排序数据
• 最后调用draw()重绘表格，使新的排序值生效

方案二：初始化时用动态渲染函数（更优） #

不需要维护data-sort属性，直接在DataTable初始化时，通过render函数动态获取复选框状态作为排序值，从根源避免缓存同步问题：

var dt3;
$(function(){
   dt3 = $('.dt3').DataTable({
       columnDefs: [
           {
               targets: 0, // 首列的索引（从0开始计数）
               orderable: true,
               render: function(data, type, row) {
                   // 当DataTable需要排序时，返回复选框的状态值；其他场景返回原单元格内容
                   if (type === 'sort') {
                       return $(data).is(':checked') ? 1 : 0;
                   }
                   return data;
               }
           }
       ]
   });

   // 复选框状态改变后直接重绘即可，无需手动维护属性
   $('body').on('change','input.chkV1',function(){
        dt3.draw();
    });
 });

这种方法更可靠，因为每次排序时都会实时读取当前复选框的状态，无需手动同步DOM属性和DataTable缓存。

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