jQuery DataTables：使用日期进行奇怪的排序答案

【问题标题】：jQuery DataTables: Weird sorting with DatesjQuery DataTables：使用日期进行奇怪的排序
【发布时间】：2018-02-21 06:44:14
【问题描述】：

我需要将我的日期列格式化为某种格式，但也需要排序为日期。由于.ToString，它像文本一样排序。任何建议如何将其排序为日期但仍保持格式？

查看：

<script>
    $(function () {
        $('#dataTableHistory').DataTable({
            "iDisplayLength": 50,
            "order": [[0, "desc"]]
        });
    });
</script>

<table id="dataTableHistory" class="display">


    <thead>
        <tr>
            <th>Date</th>
            <th>User</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>
        @foreach (var o in (List<CompoundSheetHistory>)ViewData["CompoundSheetHistories"])
        {
            <tr>
                <td>@o.DateCreated.ToString("dd MMM yyyy HH:mm:ss")</td>
                <td>@o.User.FirstName</td>
                <td>@o.ActionDescription</td>
            </tr>
        }
    </tbody>
</table>

在第一次加载时，当我单击排序按钮时，它会对列进行排序，看起来像文本。

【问题讨论】：

它正在尝试对文本进行排序，也许您可以尝试添加另一个可排序日期格式为 yyyyMMddHHmmss 的隐藏列？
是的，由于 .ToString，它将其排序为文本。隐藏列的问题是，用户将无法对其进行排序 Asc 或 Desc
将文本转换为 Date 对象并将其放入表格中不是您的选择吗？
不，这会使系统变慢

标签： javascript jquery asp.net-mvc razor datatables

【解决方案1】：

我建议包含用于数据表的 datetime-moment 插件。它具有自动类型检测和排序功能，您只需提供格式即可。

$.fn.dataTable.moment('DD MMM YYYY HH:mm:ss');

    $.fn.dataTable.moment('DD MMM YYYY HH:mm:ss');

    $(function() {
      $('#dataTableHistory').DataTable({
        "iDisplayLength": 50,
        "order": [
          [0, "desc"]
        ]
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>

<table id="dataTableHistory" class="display">
  <thead>
    <tr>
      <th>Date</th>
      <th>User</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>22 Nov 2017 10:15:55</td>
      <td>John</td>
      <td>Modified</td>
    </tr>
    <tr>
      <td>22 Nov 2017 10:15:55</td>
      <td>John</td>
      <td>Modified</td>
    </tr>
    <tr>
      <td>22 Nov 2017 10:15:55</td>
      <td>John</td>
      <td>Modified</td>
    </tr>
    <tr>
      <td>21 Nov 2017 10:13:55</td>
      <td>John</td>
      <td>Modified</td>
    </tr>
    <tr>
      <td>12 Jan 2018 11:23:21</td>
      <td>John</td>
      <td>Modified</td>
    </tr>
    <tr>
      <td>11 Nov 2017 08:14:55</td>
      <td>John</td>
      <td>Modified</td>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢@Shiffty，试试看！
对于这么小的任务可能有点矫枉过正？
@lofihelsinki 添加两个额外的脚本可能有点多。但是，如果他出于某种原因已经包含了时刻或者并不真正关心，那么我会尝试这个。
当然，如果moment 已经是构建的一部分，那么在这里也可以使用它。

【解决方案2】：

您可以将数据作为对象数组提供并使用colums.render 属性。

在DateCreated 列中保留要显示的日期，并在您的数据集中添加另一列 (DateToSort)，以保存特定日期 (date.getDate()) 的毫秒数：

var data = [
  {
    DateCreated: date.ToString("dd MMM yyyy HH:mm:ss"),
    DateToSort: date.getDate(),
    FirstName: ...,
    ActionDescription: ...
  },
  ...
]

$('#dataTableHistory').DataTable({
   data: data,
   columns: [
      {
         data: 'DateCreated',
         render: {
           _: 'DateCreated',
           sort: 'DateToSort'
         }
      },
      ...
   ]
});

您可以查看documentation

【讨论】：

【解决方案3】：

最简单的方法，但有点 hack。只需在单元格的开头包含一个隐藏的span，并采用按字母顺序排序的日期格式：

<tbody>
    @foreach (var o in (List<CompoundSheetHistory>)ViewData["CompoundSheetHistories"])
    {
        <tr>
            <td>
              <span style="display:none">@o.DateCreated.ToString("yyyy-mm-dd HH:mm:ss")
              </span>@o.DateCreated.ToString("dd MMM yyyy HH:mm:ss")
            </td>
            <td>@o.User.FirstName</td>
            <td>@o.ActionDescription</td>
        </tr>
    }
</tbody>

【讨论】：