在隐藏值上订购html表

Question

我有一个html表，它使用引导表库按列值对数据进行排序。如果数据表示为float或int，这可以正常工作，但我有一列时间。我希望时间由％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. 利用Bootstrap Table 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>