Layui数据表格如何实现前端根据某列数据进行二次排序-Layui教程-PHP中文网

Layui的table.sort()不支持二次排序，因其仅单列三态切换且无多列组合排序机制；需禁用自动排序、监听sort事件、手动维护多级排序规则并用稳定算法重排table.cache数据后reload。

为什么直接调用 `table.sort()` 无法实现二次排序

layui 的 table.sort() 默认只维护单列的升/降序状态，每次点击同一列都会在“升序→降序→取消排序”三态间切换，不会保留上一次其他列的排序逻辑。所谓“二次排序”，本质是多列组合排序（比如先按 status 升序，再按 create_time 降序），而 layui 原生不支持多列同时激活排序状态。

手动拦截排序事件 + 自定义数据重排是最可靠方案

核心思路：禁用 Layui 默认排序行为，监听 sort 事件，拿到当前点击列字段和顺序后，自行对 table.cache 或原始数据源做稳定排序（注意必须用稳定排序算法，否则相同键值的行顺序会乱）。

在 table.render() 中设置 autoSort: false 关闭自动排序
绑定 table.on('sort(demo)', function(obj){...}) 捕获点击
维护一个排序队列（如 sortRules = [{field: 'status', type: 'asc'}, {field: 'id', type: 'desc'}]），每次点击追加或替换规则
用 Array.prototype.sort() 实现多级比较：先比第一级，相等再比第二级，以此类推
排序完成后调用 table.reload() 并传入 data（不要传 url，否则会重新请求）

示例关键片段：

table.on('sort(demo)', function(obj){
  // 手动管理排序规则，这里简化为最多两列：主列 + 次列
  if (obj.field === 'status') {
    sortRules = [{field: 'status', type: obj.type}, {field: 'id', type: 'desc'}];
  } else if (obj.field === 'id') {
    sortRules = [{field: 'id', type: obj.type}, {field: 'status', type: 'asc'}];
  }
  
  // 对 cache 数据做稳定多级排序
  const sorted = table.cache.demo.sort((a, b) => {
    for (let rule of sortRules) {
      const aVal = a[rule.field], bVal = b[rule.field];
      if (aVal  bVal) return rule.type === 'asc' ? 1 : -1;
    }
    return 0;
  });
  
  table.reload('demo', {data: sorted});
});