如何使用sorttable.js对复选框列排序并置顶选中行？

错误原因 #

node.getAttribute is not a function 报错的核心原因是你调用 sorttable.innerSortFunction.apply 时传入的第一个参数不是有效的表头DOM元素（<th>），导致内部代码调用node.getAttribute时触发类型错误。

正确实现方案 #

1. 基础配置 #

确保你的表格结构符合sorttable.js要求：

• 表格根元素添加 class="sortable"
• 复选框列的表头<th>添加 class="sortable"，并指定自定义排序类型：

  <table class="sortable">
    <thead>
      <tr>
        <th class="sortable" data-sort-type="checkbox">收藏项</th>
        <!-- 其他列 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" checked>已收藏</td>
        <!-- 其他单元格 -->
      </tr>
      <tr>
        <td><input type="checkbox">未收藏</td>
        <!-- 其他单元格 -->
      </tr>
    </tbody>
  </table>
  

2. 注册复选框排序规则 #

在sorttable.js加载完成后，注册自定义的复选框排序逻辑，让sorttable自动处理：

// 注册checkbox类型的排序函数
sorttable.registerSortType('checkbox', function(a, b) {
  // 获取当前行的复选框元素
  const cbA = a.querySelector('input[type="checkbox"]');
  const cbB = b.querySelector('input[type="checkbox"]');
  
  // 规则：选中项排顶部，未选中项排后面；相同状态保持原顺序
  if (cbA.checked && !cbB.checked) return -1;
  if (!cbA.checked && cbB.checked) return 1;
  return 0;
});

3. 手动触发排序（可选） #

如果需要通过代码手动触发排序，确保传入的是表头DOM元素：

// 获取复选框列的表头
const checkboxHeader = document.querySelector('.sortable th[data-sort-type="checkbox"]');
// 触发排序：第二个参数为false表示升序（选中项在上），true为降序
sorttable.innerSortFunction.apply(checkboxHeader, [false]);

常见排查点 #

• 确认sorttable.js在你的自定义代码之前加载，避免sorttable对象未定义。
• 检查表头<th>是否存在，且未被其他JS代码篡改（比如动态替换DOM导致元素失效）。
• 如果表格是动态生成的，确保在DOM渲染完成后再注册排序类型和触发排序。

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