使用 jquery tablesorter 对日期进行排序的问题

Question

我正在使用 tablesorter 插件对 MVC .NET 应用程序中的表进行排序。我的大部分列都是字符串，我对它们没有任何问题。数字的也不行。问题是我的日期时间列也像字符串一样被排序。它们的排序如下：01/04/2009、02/02/2009、03/08/2009 等。我从该视图中的模型获取数据。

我的电话是默认的：

$("#table").tablesorter();

我尝试指定日期格式，但没有成功：

$("#table").tablesorter({
            dateFormat: 'dd/mm/yyyy'});

当我手动键入带有随机日期的静态表时，会发生奇怪的事情。它得到排序！但是我的数据来自数据库调用并被放入模型中，然后我遍历它并用数据写入 tr。

提前致谢。

编辑：这可能与我创建 tr 的方式有关吗？

<% foreach (var item in Model) { %>
<tr>
<td>
<%= Html.Encode(item.date) %>
</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<% } %>

Answer 1

尝试将 Tablesorter 解析器添加到您的日期列。 Tablesorter 带有一个用于 shortDate、usLongDate 和 isoDate 的解析器。

$("#table").tablesorter({
    headers: { colNum: { sorter: 'shortDate'} }
});

其中 colNum 是包含日期的列。我可以在 tablesorter 网站上找到的唯一示例是 here。如果 tablesorter 也对数字进行错误排序，这也有效。还有其他解析器用于百分比、IP 地址等。查看源代码末尾附近的内容，它们将在此处列出。

编辑： 在查看源代码时，dateFormat 选项似乎只查找“us”、“uk”、“dd/mm/yy”或“dd-mm-yy”。当您尝试“uk”时会发生什么？

Answer 2

我遇到了同样的问题，我添加了一个名为 datetime 的自定义解析器：

$.tablesorter.addParser({
    id: "datetime",
    is: function(s) {
        return false; 
    },
    format: function(s,table) {
        s = s.replace(/\-/g,"/");
        s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
        return $.tablesorter.formatFloat(new Date(s).getTime());
    },
    type: "numeric"
});

然后您只需将该格式应用于您想要的列，正如 Gabe G 所公开的那样（例如，将此排序器分配给第一列，您应该执行以下操作：

$("#mytable").tablesorter( 
    {   dateFormat: 'dd/mm/yyyy', 
        headers: 
            {
                0:{sorter:'datetime'}
            } 
    } ); 

Answer 3

您还可以在日期之前以数字格式 (yyyymmdd) 添加隐藏的跨度标签。此文本将首先出现并用于排序，但它会隐藏在视线之外，仅显示您想要的格式。

    <td><span style="display:none">20130923</span>23 September 2013</td>    

Answer 4

jquery tablesorter 插件有一个更新。

根据您的应用程序的语言环境，您可以按此更新对日期进行排序。

您可以通过以下链接查看表格排序器的更新。

http://tablesorter.openwerk.de/

Answer 5

更简单的使用方法：

dateFormat:'mm/dd/yyyy hh:mm:ss'

Answer 6

老实说，对我来说最简单的解决方案是，正如 compsmart 所说，在实际日期前添加一些隐藏文本。

• dateFormat: 'uk' 对我不起作用，可能是因为我的日期格式又不同了
• http://tablesorter.openwerk.de/ 涉及修改 CSS，首先我不明白为什么，其次，工作量比简单地在日期前添加隐藏文本要大。

我喜欢 compsmart 的 KISS 解决方案！

Answer 7

http://mottie.github.io/tablesorter/docs/

设置日期格式。以下是可用选项。 （修改v2.0.23）。

• “mmddyyyy”（默认）
• “ddmmyyyy”
• “yyyymmdd”

在以前的版本中，此选项设置为“us”、“uk”或“dd/mm/yy”。修改此选项以更好地适应所需的日期格式。它只适用于四位数的年份！

排序器应设置为“shortDate”，日期格式可以在“dateFormat”选项中设置，也可以在“headers”选项中为特定列设置。查看演示页面以查看它的工作原理。

$(function(){
  $("table").tablesorter({

    dateFormat : "mmddyyyy", // default date format

    // or to change the format for specific columns,
    // add the dateFormat to the headers option:
    headers: {
      0: { sorter: "shortDate" }, // "shortDate" with the default dateFormat above
      1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // day first format
      2: { sorter: "shortDate", dateFormat: "yyyymmdd" }  // year first format
    }

  });
}); 

可以通过添加以下内容来修改各个列（它们都做同样的事情），按优先级顺序设置（修改后的 v2.3.1）：

• jQuery 数据 data-dateFormat="mmddyyyy".
• 元数据 class="{ dateFormat: 'mmddyyyy'}"。这需要元数据插件。
• headers 选项标头：{ 0 : { dateFormat : 'mmddyyyy' } }。
• 头类名称 class="dateFormat-mmddyyyy"。 总体 dateFormat 选项。

就我而言，我使用过

$("#myTable").tablesorter({dateFormat: "uk"}) 

对于版本。

Answer 8

这就是我的答案：

<td data-order=<fmt:formatDate pattern = "yyyy-MM-dd" value = "${myObject.myDate}" />>${myObject.myDate}</td>

更多详情，请点击此处：https://datatables.net/manual/data/