对隐藏值排序 html table

Question

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

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

明确一点，table必须是interactable，这样用户就可以选择数据排序的列。

<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

好的，根据我的评论，这是一个基于 table 数据的答案 JavaScript（它同样可以是 JSON API return).

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

利用 Bootstrap Table JavaScript 初始化从数组中注入 table 数据。
为行程时间字段定义格式化程序和排序程序函数。
为方便起见，我使用 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>

对隐藏值排序 html table

Order html table on hidden values

html

html-table

bootstrap-table

bootstrap-4