jQuery DataTables：保持启用复选框行置顶，不受排序与筛选影响

我来帮你搞定这个问题！要实现不管用户点击哪个表头排序、或者用列筛选，启用复选框的行始终排在最前面，禁用的行在下方，咱们可以利用DataTables的orderFixed固定排序特性，配合自定义排序规则来实现，具体步骤如下：

1. 注册自定义排序规则 #

首先，我们需要告诉DataTables怎么区分“启用复选框的行”和“禁用的行”，并给它们分配排序优先级。你可以选择基于复选框的disabled属性判断，或者用你已经添加的greyed out类来判断：

// 注册自定义排序类型：checkbox-enabled
$.fn.dataTable.ext.order['checkbox-enabled'] = function (settings, col) {
  return this.api().column(col, {order:'index'}).nodes().map(function (td) {
    // 方式1：基于复选框的disabled属性判断
    const checkbox = $(td).find('input[type="checkbox"]');
    return checkbox.is(':disabled') ? 1 : 0; // 禁用的行返回1，启用的返回0（0会排在前面）

    // 方式2：如果你更想用已有的greyed out类，就用下面这行替换上面的判断
    // return $(td).closest('tr').hasClass('greyed out') ? 1 : 0;
  });
};

2. 初始化DataTable时配置固定排序 #

接下来，在表格初始化的配置里，添加orderFixed选项，让这个自定义排序规则始终优先于用户的任何排序操作，同时把复选框列和我们的自定义排序类型绑定：

$('#yourTableId').DataTable({
  // 你的其他配置（比如columns、ajax、pagination等）保持不变
  orderFixed: [
    // 固定排序规则：优先按复选框启用状态排序，启用的在前
    {
      target: 0, // 替换成你放复选框的列索引（从0开始）
      type: 'checkbox-enabled',
      order: 'asc' // asc顺序下，0（启用）会排在1（禁用）前面
    }
  ],
  columnDefs: [
    // 给复选框列绑定自定义排序类型
    {
      targets: 0, // 同样替换成复选框列的索引
      orderDataType: 'checkbox-enabled'
    }
  ]
});

3. 效果验证 #

配置完成后，你可以测试以下场景：

• 点击任意表头排序：启用复选框的行会始终排在最顶部，然后再按你点击的列排序
• 使用列筛选（比如选择“Product Group”里的“Longs”）：筛选后的结果依然会保持“启用行在前、禁用行在后”的分组，同时遵循筛选后的排序规则

关键原理 #

orderFixed是DataTables的核心特性，它会让指定的排序规则在所有用户触发的排序之前执行，相当于给行设置了一个“优先级排序”。而我们的自定义排序规则则把启用复选框的行标记为“高优先级”（排序值0），禁用的标记为“低优先级”（排序值1），这样不管后续怎么排序，优先级高的行都会留在最前面。

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