使用jquery tablesorter进行日期排序出现问题

Question

我正在使用tablesorter插件来对我的MVC .NET应用程序中的表进行排序。我的大多数列都是字符串，并且它们没有任何问题，数字列也是如此。问题在于我的日期时间列也被排序为字符串。它们按照这样的方式排序：2009年01月04日，2009年02月02日，2009年03月08日等等。我在视图中从模型获取数据。我的调用是默认的:

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

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

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

当我手动输入一个具有随机日期的静态表格时，它会被排序！但是我的数据来自数据库调用并放入模型中，然后我遍历它并使用数据编写。

提前致谢。

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

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

- Gabe G

---

你能否将日期格式化为yyyy-mm-dd？ - ScottE

抱歉，它必须使用我的国家语言环境（西班牙）。:( - Gabe G

Answer 1

尝试为日期列添加一个Tablesorter解析器。Tablesorter自带一个用于短日期、美国长日期和ISO日期的解析器。

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

其中colNum是包含日期的列。我在tablesorter网站上只找到了这个示例。如果tablesorter对数字排序错误，这也适用。还有其他解析器可用于百分比、IP地址等。在源代码末尾附近查看它们的列表。

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

- Ben Koehler

---

我也尝试了shorDate解析器，但是忘了提。 没有运气:( 我将尝试其他日期解析器并让您知道。谢谢 - Gabe G

好的！ 我把代码写成了这样：$("#table").tablesorter({dateFormat: 'uk'});我一直在思考为什么默认调用在编写普通 HTML 表格时按预期工作，但在 MVC 生成表格时却不起作用（并且必须使用此解决方法）。 谢谢！ - Gabe G

再一次StackOverflow似乎是唯一一个给出正确答案的地方！dateFormat: 'uk'对我同样适用，而dateFormat："dd/mm/yyyy"则不行。 - Steve Magness

dd/mm/yyyy不存在 ;) - Cas Bloem

@CasBloem 这很糟糕，因为他们自己的文档声称支持它：http://mottie.github.io/tablesorter/docs/example-option-date-format.html - Nick Coad

使用 "dateFormat: 'ddmmyyyy'" 对我有用。它不理解 "dd/mm/yyyy"。 - RC82

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'}
            } 
    } ); 

- fernandojsg

Answer 3

您还可以在日期之前添加一个隐藏的 span 标签，格式为数字 (yyyymmdd)。这段文本将首先出现并用于排序，但它将被隐藏不可见，只显示您想要的格式。

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

- compsmart

---

更合理的做法是在表格单元格上使用 data-* 属性，而不是将 span 作为子元素。 - James Donnelly

Answer 4

jquery tablesorter插件有更新。

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

您可以通过以下链接查看tablesorter的更新。

http://tablesorter.openwerk.de/

- ersegun

Answer 5

更简单的方法是使用：

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

- Mitesh Vora

Answer 6

这对我来说是答案：

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

更多细节，请参见：https://datatables.net/manual/data/

- Forrest

Answer 7

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

• dateFormat: 'uk' 对我不起作用，可能是因为我的日期格式又不同了
• http://tablesorter.openwerk.de/ 需要修改CSS，首先我不明白为什么要这样做，其次这需要比在日期前面添加隐藏文本更大的努力。

我喜欢compsmart的KISS解决方案！

- Guido Lo Spacy

Answer 8

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
    }

  });
}); 

可以通过添加以下内容来修改单个列（它们都执行相同的操作），按优先级顺序设置（Modified v2.3.1）：

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

在我的情况下，我已经使用了

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

关于版本。

- Licysca