DataTables勾选checkbox行点击及页面初始化时置顶排序实现问题

问题原因 #

你当前的隐藏列（第一列）赋值逻辑仅绑定了checkbox的change事件，页面首次加载时该事件不会触发，默认勾选行对应的隐藏列值为空，不满足你设置的orderFixed: [0, 'desc']排序规则，因此无法自动置顶。
另外你现有全选逻辑仅修改了checkbox的checked属性，没有触发change事件，全选后选中的行也不会自动置顶，可同步修复。

修复代码 #

1. 调整DataTables初始化逻辑，新增初始化后默认值填充 #

$(document).ready(function() {
    table = $('#schedule-list').DataTable( {
            "dom": '<"toolbar">frtip',
            "iDisplayLength": 500,
            columnDefs: [
            { targets: 0, visible: false }
            ],
            orderFixed: [0, 'desc'],
            } );
        $("#schedule-list_wrapper div.toolbar").html('<input class="btn btn-primary btn-sm md-btn-flat ml-3 checkall2" type="button" name="CheckAll2" id="checkall2" value="Select All" onClick="this.value=checkScheds(this.form)" style="float:left;">');
        
        // 新增：初始化完成后遍历所有行，给隐藏列赋值
        table.rows().every(function() {
          const $checkbox = $(this.node()).find('input.schedule');
          table.cell({ row: this.index(), column: 0 }).data($checkbox.is(':checked') ? 1 : 0);
        });
        // 重绘触发排序
        table.draw();
        } );

2. 调整全选逻辑，触发change事件更新排序 #

var checkflag2 = false;
function checkScheds() {
  var inputs = document.getElementsByClassName( 'schedule' );
  checkflag2 = checkflag2 === false ? true : false;
  for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = checkflag2;
  }
  // 新增：触发所有checkbox的change事件，复用现有排序逻辑
  $('#schedule-list input.schedule').trigger('change');
  return checkflag2 === true ? "Deselect All" : "Select All";
}

逻辑说明 #

• 初始化后遍历所有表格行，读取checkbox的默认选中状态，给隐藏的排序列赋值1/0，重绘后自动触发固定排序规则，默认勾选的行就会排在顶部
• 全选操作后主动触发所有checkbox的change事件，复用你已写好的列数据更新、重绘逻辑，无需重复写代码，全选后的行也会自动置顶

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