基于隐藏值实现Bootstrap Table时间列正确排序

完全可以解决！这种字符串格式的时间排序问题，用Bootstrap Table的内置特性就能轻松搞定，核心就是让排序逻辑用隐藏的数值型时间值（比如总分钟数）来跑，而不是显示的格式化字符串。下面给你两种常用的实现方式：

方法1：绑定隐藏排序字段（推荐，适合可控数据源） #

这种方式是给每条数据额外添加一个用于排序的数值字段（比如总分钟数），然后告诉Bootstrap Table用这个字段做排序依据，只展示格式化后的字符串。

步骤1：准备带排序字段的数据源 #

在生成数据时，同时计算出时间对应的总分钟数（或总秒数），比如：

const tableData = [
  { id: 1, showTime: "15小时2分钟", sortTime: 902 }, // 15*60+2=902
  { id: 2, showTime: "32分钟", sortTime: 32 },
  { id: 3, showTime: "2小时15分钟", sortTime: 135 }
];

步骤2：表格列配置指定排序字段 #

在Bootstrap Table的列定义中，给时间列设置data-sort-field属性，指向隐藏的数值字段：

<table id="myTable" data-toggle="table" data-data="tableData">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="showTime" data-sort-field="sortTime" data-sortable="true">耗时</th>
      <!-- 可选：如果需要完全隐藏排序字段，添加这一列 -->
      <th data-field="sortTime" data-visible="false" data-sortable="false"></th>
    </tr>
  </thead>
</table>

这样点击表头排序时，Bootstrap Table会自动用sortTime的数值来比较，而不是显示的字符串，排序逻辑就完全正确了。

方法2：自定义排序函数（适合无法修改数据源的场景） #

如果没办法给数据源添加额外字段，你可以直接给时间列写一个自定义排序函数，在函数里解析字符串转换成数值再比较：

步骤1：配置自定义排序属性 #

在列定义中添加data-custom-sort属性，指定排序函数名：

<table id="myTable" data-toggle="table" data-data="tableData">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="showTime" data-sortable="true" data-custom-sort="sortTimeColumn">耗时</th>
    </tr>
  </thead>
</table>

步骤2：编写自定义排序函数 #

在JavaScript中实现解析时间字符串并排序的逻辑：

function sortTimeColumn(a, b, order) {
  // 辅助函数：把"X小时Y分钟"转换成总分钟数
  const parseToMinutes = (timeStr) => {
    let hours = 0, minutes = 0;
    if (timeStr.includes("小时")) {
      hours = parseInt(timeStr.split("小时")[0]);
      minutes = timeStr.includes("分钟") ? parseInt(timeStr.split("小时")[1].split("分钟")[0]) : 0;
    } else {
      minutes = parseInt(timeStr.split("分钟")[0]);
    }
    return hours * 60 + minutes;
  };

  const valA = parseToMinutes(a.showTime);
  const valB = parseToMinutes(b.showTime);
  
  // 根据排序顺序返回比较结果
  return order === 'asc' ? valA - valB : valB - valA;
}

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