JS Datatables多值列自定义排序咨询：点击列头切换排序规则

完全可以实现这种需求！我们可以通过自定义排序规则+跟踪当前排序状态的方式，让每次点击列标题时切换不同的自定义排序逻辑。下面以jQuery DataTables为例，给出具体实现步骤：

1. 定义自定义排序优先级 #

首先把你的业务排序规则整理成数组，每个数组对应一种排序逻辑，你可以根据需求自由调整顺序或增减规则：

// 定义所有需要循环的排序规则
const customSortRules = [
  { key: 'elegant-first', order: { 0: 1, 1: 2, 2: 3, 3: 4 } }, // Elegant → Basic → Business → Sport
  { key: 'sport-first', order: { 3: 1, 2: 2, 1: 3, 0: 4 } }, // Sport → Business → Basic → Elegant
  { key: 'business-first', order: { 2: 1, 3: 2, 0: 3, 1: 4 } }, // Business → Sport → Elegant → Basic
  { key: 'basic-first', order: { 1: 1, 0: 2, 3: 3, 2: 4 } } // Basic → Elegant → Sport → Business
];

2. 注册自定义排序类型 #

给DataTables注册每个自定义排序的比较函数，让表格能识别并使用这些规则：

// 遍历所有规则，注册对应的排序类型
customSortRules.forEach(rule => {
  $.fn.dataTable.ext.type.order[`${rule.key}-pre`] = function(value) {
    // 将原始值（0/1/2/3）映射为排序权重，权重越小排越前
    return rule.order[value];
  };
});

3. 跟踪排序状态并绑定点击事件 #

我们需要记录当前使用的排序规则索引，每次点击列标题时切换到下一个规则，并触发表格重新排序：

// 初始化状态：默认使用第0个排序规则
let currentSortIndex = 0;
const targetColumnIndex = 2; // 假设目标列是第3列（索引从0开始，根据你的表格调整）

// 监听目标列标题的点击事件
$(`#your-table th:eq(${targetColumnIndex})`).on('click', function(e) {
  e.stopPropagation(); // 阻止DataTables默认的ASC/DESC排序行为
  
  // 切换到下一个排序规则，循环切换（到最后一个后回到第一个）
  currentSortIndex = (currentSortIndex + 1) % customSortRules.length;
  const currentRule = customSortRules[currentSortIndex];
  
  // 应用当前排序规则并重新渲染表格
  const table = $('#your-table').DataTable();
  table.order([[targetColumnIndex, 'asc']]) // 这里的asc仅为占位，实际排序由自定义规则决定
       .column(targetColumnIndex)
       .order(currentRule.key)
       .draw();
  
  // 可选：更新列标题的排序提示，提升用户体验
  $(this).find('.sort-indicator').remove();
  $(this).append(`<span class="sort-indicator">${currentRule.key.split('-')[0]}</span>`);
});

关键补充 #

如果是其他框架的DataTable（比如Vue DataTable、React DataGrid等），核心思路完全一致：

1. 定义好每种自定义排序的比较逻辑
2. 用变量跟踪当前使用的排序规则
3. 点击列标题时切换规则并触发表格重新排序

你可以根据自己的业务需求，随时调整customSortRules里的排序逻辑，甚至动态添加更多规则。

内容的提问来源于stack exchange，提问作者Daniel Programátor