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

Problem with sorting dates with jquery tablesorter

提问by Gabe G

I am using tablesorter plugin to sort my tables in an MVC .NET App. Most of my columns are strings and I'm having no problems with them. Neither with the numeric ones. The thing is my datetime columns are also getting sorted as if they were strings. They get sorted like this: 01/04/2009, 02/02/2009, 03/08/2009, etc. I obtain the data from the Model in that View.

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

My call is the default one:

我的电话是默认的：

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

I tried specifying dateformat with no luck:

我尝试指定日期格式但没有运气：

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

The odd thing happens when I manually type a static table with random dates. It gets sorted! But my data comes from a DB call and is put into the Model, I then itreate through it and write tr's with the data.

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

Thanks in advance.

提前致谢。

EDIT: Could it be something related with the way I create the tr's?

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

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

回答by Ben Koehler

Try adding a Tablesorter parser to your date column. Tablesorter comes with a parser for shortDate, usLongDate and isoDate.

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

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

where colNum is the column with the dates. The only example I could find on the tablesorter site is here. This also works if tablesorter is sorting numbers wrong as well. There are other parsers as well for percent, ip address and more. Take a look near the end of the source code and they'll be listed there.

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

Edit:In looking at the source code, the dateFormat option appears to be looking only for "us", "uk", "dd/mm/yy" or "dd-mm-yy". What happens when you try "uk"?

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

回答by fernandojsg

I got the same problem, and I added a custom parser called datetime:

我遇到了同样的问题，我添加了一个名为 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})/, "//");
        return $.tablesorter.formatFloat(new Date(s).getTime());
    },
    type: "numeric"
});

Then you just need to apply that format to the columns you want, as Gabe G exposed (For example to assign this sorter to the first column you should do the following:

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

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

回答by compsmart

You can also add a hidden span tag before your date in numerical format (yyyymmdd). This text will come first and be used for sorting but it will be hidden from sight and only show the format you want.

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

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

回答by ersegun

There exist an update for jquery tablesorter plugin.

jquery tablesorter 插件存在更新。

According to the locale of the your application, you can sort the dates by this update.

根据应用程序的区域设置，您可以按此更新对日期进行排序。

You can view the update of the tablesorter by following the below link.

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

http://tablesorter.openwerk.de/

http://tablesorter.openwerk.de/

回答by Mitesh Vora

Easier way use:

更简单的使用方法：

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

回答by Guido Lo Spacy

To be honest the simplest solution for me was, as compsmart said, adding some hidden text in front of the actual date.

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

• dateFormat: 'uk'was not working for me, maybe because my date format is again different
• http://tablesorter.openwerk.de/involves modifying the CSS, first I don't understand why and second the effort is bigger than simple adding hidden text in front of the date.

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

I like the KISS solution from compsmart!

我喜欢 compsmart 的 KISS 解决方案！

回答by Licysca

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

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

Set the date format. Here are the available options. (Modified v2.0.23).

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

• "mmddyyyy" (default)
• "ddmmyyyy"
• "yyyymmdd"

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

In previous versions, this option was set as "us", "uk" or "dd/mm/yy". This option was modified to better fit needed date formats. It will only work with four digit years!

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

The sorter should be set to "shortDate" and the date format can be set in the "dateFormat" option or set for a specific columns within the "headers" option. See the demo page to see it working.

排序器应设置为“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
    }

  });
}); 

Individual columns can be modified by adding the following (they all do the same thing), set in order of priority (Modified v2.3.1):

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

• jQuery data data-dateFormat="mmddyyyy".
• metadata class="{ dateFormat: 'mmddyyyy'}". This requires the metadata plugin.
• headers option headers : { 0 : { dateFormat : 'mmddyyyy' } }.
• header class name class="dateFormat-mmddyyyy". Overall dateFormat option.

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

In my case I have used

就我而言，我使用过

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

for the version.

对于版本。

回答by Forrest

This was the answer for me:

这是我的答案：

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

more details, here: https://datatables.net/manual/data/

更多详细信息，请访问：https: //datatables.net/manual/data/