使用jquery tablesorter排序日期/时间不正确

Question

我正在使用插件Tablesorter。我无法正确配置其中一列。 它看起来像这样（几小时分钟）：

0d04h11m
4d22h26m
27d20h14m
0d09h50m
2d02h34m
1d11h02m

我尝试应用{sorter：'digits'}

排序后：

4d22h26m
2d02h34m
27d20h14m
1d11h02m
0d09h50m
0d04h11m

如果是两位数的日子，这不是真正的种类。

我该如何解决这个问题？

Answer 1

您需要添加自己的解析器：

免责声明：以下内容仅在您的数据始终具有相同格式时才有效。否则，如果您可以使用4d，4d1h这样的内容，则需要找到另一种方法。

$.tablesorter.addParser({
    id: 'custom_sort_function',
    is: function(s) {
        return false;
    },
    format: function(s) {
        return parseInt(s.replace(/\D/g, ''), 10); // '0d04h11m' --> '00411' --> 411
    },
    type: 'numeric'
});

然后你添加：

{sorter:'custom_sort_function'}

有关更多功能，see the docs。

编辑：

此函数将为您提供更安全的解析器：

format: function(s) {
    var regexParser = /(?:([0-9]{1,2})d)?(?:([0-9]{1,2})h)?(?:([0-9]{1,2})m)?(?:([0-9]{1,2})s)?/;
    var matches = regexParser.exec(s);
    var days = parseInt(matches[1], 10) || 0;
    var hours = parseInt(matches[2], 10) || 0;
    var minutes = parseInt(matches[3], 10) || 0;
    var seconds = parseInt(matches[4], 10) || 0;

    return  ((days * 24 + hours) * 60 + minutes) * 60 + seconds;
}

如果你加上这个：

is: function(s) {
    return /^(?:([0-9]{1,2})d)?(?:([0-9]{1,2})h)?(?:([0-9]{1,2})m)?(?:([0-9]{1,2})s)?$/.test(s);
}

您将拥有自动解析器，因此您不需要{sorter: 'custom_sort_function'}。

Answer 2

  

已更新

您可以使用此功能对日期进行排序：

＆＃13;

＆＃13;

$(function() {
  var sortDates = (function(){
    function dateToNumber(date){
      return parseInt(
        date.match(/\d+/g)
          .map(function(field){
            return field.length === 1 ? '0' + field : field;
          }).join('')
      , 10);
    }
    return function(date1, date2){
      return dateToNumber(date1) - dateToNumber(date2);
    };
  }());

  $("#table").tablesorter({
    textSorter : {
      1 : sortDates
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.25.1/js/jquery.tablesorter.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th>dates</th>
    </tr>
  </thead>
  <tr>
    <td>0d04h11m</td>
  </tr>
  <tr>
    <td>4d22h26m</td>
  </tr>
  <tr>
    <td>27d20h14m</td>
  </tr>
  <tr>
    <td>0d09h50m</td>
  </tr>
  <tr>
    <td>2d02h34m</td>
  </tr>
  <tr>
    <td>1d11h02m</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;