web-dev-qa-db-ja.com

jquerytablesorterで日付を並べ替える際の問題

Tablesorterプラグインを使用して、MVC.NETアプリでテーブルを並べ替えています。私の列のほとんどは文字列であり、問​​題はありません。数値のものでもありません。問題は、日時列も文字列であるかのように並べ替えられていることです。これらは次のように並べ替えられます：01/04/2009、02/02/2009、03/08/2009など。そのビューのモデルからデータを取得します。

私の呼び出しはデフォルトです：

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

運が悪かったのでdateformatを指定してみました：

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

ランダムな日付の静的テーブルを手動で入力すると、奇妙なことが起こります。仕分けされます！しかし、私のデータはDB呼び出しから取得され、モデルに入れられます。次に、それを繰り返して、データを使用してtrを書き込みます。

前もって感謝します。

編集：それは私がtrを作成する方法に関連する何かでしょうか？

<% foreach (var item in Model) { %>
<tr>
<td>
<%= Html.Encode(item.date) %>
</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<% } %>
jqueryasp.net-mvctablesorter
20
Gabe G

Tablesorterパーサーを日付列に追加してみてください。 Tablesorterには、shortDate、usLongDate、isoDateのパーサーが付属しています。

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

ここで、colNumは日付の列です。 tablesorterサイトで見つけた唯一の例は ここ です。これは、tablesorterが数値を間違ってソートしている場合にも機能します。パーセント、IPアドレスなどの他のパーサーもあります。ソースコードの終わり近くを見てください、そしてそれらはそこにリストされます。

編集：ソースコードを見ると、dateFormatオプションは「us」、「uk」、「dd/mm/yy」のみを探しているように見えます"または" dd-mm-yy "。 「uk」を試してみるとどうなりますか？

26
Ben Koehler

同じ問題が発生し、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'}
            } 
    } );
16
fernandojsg

日付の前に数値形式（yyyymmdd）で非表示のスパンタグを追加することもできます。このテキストが最初に表示され、並べ替えに使用されますが、非表示になり、必要な形式のみが表示されます。

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

Jquerytablesorterプラグインのアップデートがあります。

アプリケーションのロケールに応じて、この更新によって日付を並べ替えることができます。

以下のリンクをたどると、テーブルソーターの更新を表示できます。

http://tablesorter.openwerk.de/

2
ersegun

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

日付形式を設定します。利用可能なオプションは次のとおりです。 （変更されたv2.0.23）。

  • 「mmddyyyy」（デフォルト）
  • 「ddmmyyyy」
  • 「yyyymmdd」

以前のバージョンでは、このオプションは「us」、「uk」、または「dd/mm/yy」として設定されていました。このオプションは、必要な日付形式によりよく適合するように変更されました。それは4桁の年でのみ機能します！

ソーターは「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'}"。これにはメタデータプラグインが必要です。
  • ヘッダーオプションヘッダー：{0：{dateFormat： 'mmddyyyy'}}。
  • ヘッダークラ​​ス名class = "dateFormat-mmddyyyy"。全体的なdateFormatオプション。

私の場合、私は使用しました

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

バージョンの。

0
Licysca

これが私にとっての答えでした：

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

詳細については、こちらをご覧ください： https://datatables.net/manual/data/

0
Forrest

正直なところ、私にとって最も簡単な解決策は、compsmartが言ったように、実際の日付の前にいくつかの隠しテキストを追加することでした。

  • dateFormat： 'uk'が機能していませんでした。おそらく、日付形式が再び異なるためです。
  • http://tablesorter.openwerk.de/ CSSの変更が含まれます。最初は理由がわかりません。次に、日付の前に非表示のテキストを追加するよりも手間がかかります。

私はcompsmartのKISSソリューションが好きです！

0
Guido Lo Spacy

より簡単な方法の使用：

dateFormat:'mm/dd/yyyy hh:mm:ss'
0
Mitesh Vora