时间戳

首页 > 解决方案 > DataTable 最终日期/时间排序 - 使用自定义格式

sorting - DataTable 最终日期/时间排序 - 使用自定义格式

问题描述

有人能帮帮我吗？我正在尝试通过“最终日期/时间排序”插件对数据使用自定义排序格式。它部分工作......我需要帮助才能让它完全工作。

我有一张桌子，其中一个名为“Laufzeit”的列将显示一张票的运行时间。我让我的 sql 数据库计算日期时间字段和 NOW() 之间的差异。然后我使用 javascript 将客户端的格式转换为您可以在 JSFiddle 中看到的格式。

格式是这样的：6 Tage 09:47:15 (days 'Tage' 时:分:秒)

对于排序，我正在尝试这个：https ://datatables.net/blog/2014-12-18 它到目前为止工作，除了一件小事......当数据显示“0天”时，它被排序到最后一个位置，而不是第一个位置。其余的排序是正确的。

有人可以帮我吗？谢谢。:)

borsTiHD

<table class="dataTable" id="example"><tbody>
  <tr>
    <td>0 Tage 00:33:21</td>
  </tr>
  <tr>
    <td>1 Tage 02:39:24</td>
  </tr>
  <tr>
    <td>1 Tage 03:18:25</td>
  </tr>
  <tr>
    <td>1 Tage 03:47:15</td>
  </tr>
  <tr>
    <td>2 Tage 06:47:15</td>
  </tr>
  <tr>
    <td>3 Tage 08:47:15</td>
  </tr>
  <tr>
    <td>4 Tage 18:47:15</td>
  </tr>
  <tr>
    <td>6 Tage 09:47:15</td>
  </tr>
  <tr>
    <td>13 Tage 05:26:59</td>
  </tr>
  <tr>
    <td>13 Tage 18:24:24</td>
  </tr>
  <tr>
    <td>20 Tage 12:12:13</td>
  </tr>
  <tr>
    <td>21 Tage 18:24:56</td>
  </tr>
  <tr>
    <td>34 Tage 22:59:59</td>
  </tr>
  <tr>
    <td>0 Tage 00:11:06</td>
  </tr>
  <tr>
    <td>0 Tage 00:24:22</td>
  </tr>
</tbody></table>

<script>
$.fn.dataTable.moment( 'DDD [Tage] HH:mm:ss' );

Table = $("#example").DataTable( {
    paging: false,
    searching: false,
    responsive: true,
    "bInfo" : true,
    "ordering": true,
    "columns": [
        { title: "Laufzeit:" },
    ],
});
</script>

PS：我的小提琴： https ://jsfiddle.net/borsTiHD/Lcnaq5gu/

标签： sortingdatetimedatatable

解决方案

'0' 不是按时刻的有效日期。当它被解析为时刻日期时，日期将改为当前日期。这是一个例子：

console.log(moment('1 Tage 01:20:35', 'DDD [Tage] HH:mm:ss').format()) // 1st january
console.log(moment('15 Tage 01:20:35', 'DDD [Tage] HH:mm:ss').format()) // 15th january
console.log(moment('32 Tage 01:20:35', 'DDD [Tage] HH:mm:ss').format()) // 1st february
console.log(moment('0 Tage 01:20:35', 'DDD [Tage] HH:mm:ss').format()) // current date
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

因此，要支持一年中的第 0 天，您需要编写一个自定义排序函数，该函数将解析您的输入并处理排序。我使用正则表达式（测试）编写了一些非常基本的示例，并将提供的日期添加到当前日期：

var types = $.fn.dataTable.ext.type;

// Add type detection
types.detect.unshift(function(d) {
  return parseDate(d) ? 'custom-moment' : null;
});

// Add sorting method - use an integer for the sorting
types.order['custom-moment-pre'] = function(d) {
  return moment().add(parseDate(d)).unix();
};

function parseDate(d) {
  //Format: DDD [Tage] HH:mm:ss
  var parsedDate = d.match(/^\s*(\d+) Tage (\d+):(\d+):(\d+)\s*$/);
  if (!parsedDate) {
    return undefined;
  }
  return {
    days: parsedDate[1],
    hours: parsedDate[2],
    minutes: parsedDate[3],
    seconds: parsedDate[4]
  }
}

Table = $("#example").DataTable({
  paging: false,
  searching: false,
  responsive: true,
  "bInfo": true,
  "ordering": true,
  "columns": [{
    title: "Laufzeit:"
  }, ],
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

<table class="dataTable" id="example"><tbody>
  <tr>
    <td>0 Tage 00:33:21</td>
  </tr>
  <tr>
    <td>1 Tage 02:39:24</td>
  </tr>
  <tr>
    <td>1 Tage 03:18:25</td>
  </tr>
  <tr>
    <td>1 Tage 03:47:15</td>
  </tr>
  <tr>
    <td>2 Tage 06:47:15</td>
  </tr>
  <tr>
    <td>3 Tage 08:47:15</td>
  </tr>
  <tr>
    <td>4 Tage 18:47:15</td>
  </tr>
  <tr>
    <td>6 Tage 09:47:15</td>
  </tr>
  <tr>
    <td>13 Tage 05:26:59</td>
  </tr>
  <tr>
    <td>13 Tage 18:24:24</td>
  </tr>
  <tr>
    <td>20 Tage 12:12:13</td>
  </tr>
  <tr>
    <td>21 Tage 18:24:56</td>
  </tr>
  <tr>
    <td>34 Tage 22:59:59</td>
  </tr>
  <tr>
    <td>0 Tage 00:11:06</td>
  </tr>
  <tr>
    <td>0 Tage 00:24:22</td>
  </tr>
</tbody></table>

推荐阅读