在隐藏值上订购 html 表

Question

我有一个 html 表，它使用引导表库按列值对数据进行排序。如果数据表示为浮点数或整数，这很好用，但我有一列时间。我希望用 % hr & % min 形式的字符串表示时间，但是因为它们是一个字符串，所以它们不是数据可排序的。在下面的示例中，“15 小时 2 分钟”远大于“32 分钟”，但排序会将“32 分钟”放在顶部，因为它以 3 开头。

有没有办法让表格显示我的人类可读值，同时对不同的隐藏数据集（总分钟数）进行排序？

需要明确的是，表格必须是可交互的，以便用户可以选择数据按哪些列排序。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

<table id="table"
       class="table-striped"
       data-toggle="table"
       data-sort-name="traveltime"
       data-sort-order="desc">
    <thead>
        <tr>
            <th data-sortable="true">Name</th>
            <th data-sortable="true">Distance</th>
            <th data-field="traveltime" data-sortable="true">Travel Time</th>
            <th data-sortable="true">Created Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Example Name</td>
            <td>15.1</td>
            <td>15 hr & 2 min</td>
            <td>2018-02-11 18:15:15</td>
        </tr>
        <tr>
            <td>Example Name 2</td>
            <td>10.1</td>
            <td>32 min</td>
            <td>2018-02-11 18:19:05</td>
        </tr>
    </tbody>
</table>

如果我需要提供更多信息，请告诉我。

Answer 1

好的，根据我的评论，这里是基于表数据作为 JavaScript 的答案（它同样可以是 JSON API 返回）。

根据您的示例，该表在 <thead> 中定义了数据字段，但是：

1. 利用引导表 JavaScript 初始化从数组中注入表数据。
2. 为行程时间字段定义格式化程序和分类程序函数。
3. 为方便起见，我使用了momentjs 库来处理日期和持续时间。

var data = [{
  name: 'Example Name',
  distance: 15.1,
  travelTime: 15 * 60 + 2, // '15 hr & 2 min',
  created: moment('2018-02-11 18:15:15').toDate(),
}, {
  name: 'Example Name 3',
  distance: 25.1,
  travelTime: 24 * 60 + 2, // '15 hr & 2 min',
  created: moment('2018-02-11 18:25:15').toDate(),
}, {
  name: 'Example Name 2',
  distance: 10.1,
  travelTime: 32, // '32 min',
  created: moment('2018-02-11 18:19:05').toDate(),
}]

function formatTravelTime(value, row, index, field) {
  return moment.duration(value, 'minutes').humanize()
}

// this is not required in the case, but as an example of a sorter
function travelTimeSorter(a, b) {
	return a < b ? -1 : (a > b ? 1 : 0)
}

$(function() {
  $('#table').bootstrapTable({
    data: data
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>

<table id="table">
  <thead>
    <tr>
      <th data-field="name" data-sortable="true">Name</th>
      <th data-field="distance" data-sortable="true">Distance</th>
      <th data-field="travelTime" data-formatter="formatTravelTime" data-sorter="travelTimeSorter" data-sortable="true">Travel Time</th>
      <th data-field="created" data-sortable="true">Created Date</th>
    </tr>
  </thead>
</table>