2009-07-07 11 views
20

Ich verwende Tablesorter-Plugin, um meine Tabellen in einer MVC .NET App zu sortieren. Die meisten meiner Spalten sind Strings und ich habe keine Probleme mit ihnen. Weder mit den numerischen noch. Die Sache ist, dass meine datetime columns auch sortiert werden, als wären sie Strings. Sie werden wie folgt sortiert: 01.04.2009, 02.02.2009, 03.08.2009, usw. Ich erhalte die Daten vom Modell in dieser Ansicht.Problem mit Sortierdaten mit jquery tablesorter

ist mein Aufruf der Standard ein:

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

Ich habe versucht, ohne Glück Angabe Datumsformat:

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

Das Seltsame passiert, wenn ich manuell eine statische Tabelle mit Zufallsdaten eingeben. Es wird sortiert! Aber meine Daten stammen von einem DB-Aufruf und werden in das Model gesteckt, ich retire es dann durch und schreibe trs mit den Daten.

Vielen Dank im Voraus.

EDIT: Könnte es etwas mit der Art, wie ich die trs erstellen?

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

Ist es möglich, Ihr Datum in JJJJ-MM-TT zu formatieren? – ScottE

+0

Nein, es muss in meinem Land (Spanien) sein. :( –

Antwort

26

Versuchen Sie, einen Tablesorter-Parser zu Ihrer Datumsspalte hinzuzufügen. Tablesorter kommt mit einem Parser für shortDate, usLongDate und isoDate.

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

wo colNum die Spalte mit den Daten ist. Das einzige Beispiel, das ich auf der Tablesorter-Site finden konnte, ist here. Dies funktioniert auch, wenn der satter auch Zahlen falsch sortiert. Es gibt auch andere Parser für Prozent, IP-Adresse und mehr. Werfen Sie einen Blick auf das Ende des Quellcodes und sie werden dort aufgelistet.

Edit: In dem Quelltext suchen, die Datumsformat Option erscheint für "uns", "uk", "TT/MM/JJ" oder "dd-mm-yy" nur auf der Suche zu sein. Was passiert, wenn Sie "Großbritannien" ausprobieren?

+0

Ich versuchte Parser als gut shorDate aber vergessen zu erwähnen, Kein Glück entweder :(Ich werde einen Versuch mit den anderen Datum Parser geben und lassen Sie wissen Dank –

+12

Das funktionierte ich den Anruf setzen sich wie folgt:..! $ ("#tabelle").Tabellensortierung ({dateFormat: 'uk'}); Ich frage mich, warum, mit dem Standardaufruf, funktioniert wie vorgesehen beim Schreiben einer Tabelle in einfachen HTML und nicht beim MVC-Generierung (und diese Problemumgehung zu finden). Danke! –

+1

Wieder scheint StackOverflow der einzige Ort mit der richtigen Antwort zu sein! dateFormat: 'uk' funktioniert auch für mich, während dateFormat: "TT/MM/JJJJ" nicht funktioniert. –

16

bekam ich das gleiche Problem, und ich fügte einen benutzerdefinierten Parser namens Datetime: dieses Format gelten

$.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" 
}); 

Dann müssen Sie nur auf die Spalten, die Sie wollen, wie Gabe G ausgesetzt (zum Beispiel diese zuweisen Sortierer an der ersten Spalte Sie folgendes tun sollen:

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

Das funktioniert super. Danke –

2

Es gibt ein Update für jquery tablesorter Plugin

nach dem Gebietsschema des Ihrem applic. können Sie die Daten nach diesem Update sortieren.

Sie können das Update des Tablesorter anzeigen, indem Sie den folgenden Link folgen.

http://tablesorter.openwerk.de/

7

Sie können auch einen versteckten span-Tag vor dem geplanten in numerischem Format (yyyymmdd) hinzuzufügen. Dieser Text wird zuerst kommen und zum Sortieren verwendet werden, aber er wird nicht sichtbar sein und nur das gewünschte Format anzeigen.

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

Es wäre logischer, ein 'data- *' - Attribut in der Tabellenzelle zu verwenden, anstatt eine Spanne als untergeordnetes Element zu haben. –

0

einfache Art und Weise Gebrauch:

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

Um die einfachste Lösung, ehrlich zu sein war für mich, wie compsmart sagte, einigen versteckten Text vor dem aktuellen Datum hinzufügen.

  • Datumsformat: ‚uk‘ war für mich nicht funktioniert, vielleicht weil mein Datumsformat wieder anders
  • http://tablesorter.openwerk.de/ beinhaltet die CSS ändern, zuerst ich verstehe nicht, warum und zweite der Aufwand ist größer als Einfach versteckten Text vor dem Datum hinzufügen.

Ich mag die KISS-Lösung von Comp Smart!

0

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

das Datumsformat einstellen. Hier sind die verfügbaren Optionen. (Geändert v2.0.23).

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

In früheren Versionen wurde diese Option als "uns", "uk" gesetzt oder „dd/mm/jj ". Diese Option wurde geändert, um die benötigten Datumsformate besser anzupassen. Es wird nur mit vierstelligen Jahren funktionieren!

Der Sortierer sollte auf "shortDate" eingestellt sein, und das Datumsformat kann in der Option "dateFormat" festgelegt oder für bestimmte Spalten innerhalb der Option "headers" festgelegt werden. Sehen Sie sich die Demo-Seite an, um zu sehen, wie es funktioniert.

  • jQuery Daten data-dateformat =“:

    $(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 
        } 
    
        }); 
    }); 
    

    Einzelne Spalten können durch Hinzufügen des folgenden (sie alle das gleiche tun), setzen in der Reihenfolge ihrer Priorität (Modified v2.3.1) modifiziert werden mmddyyyy ".

  • Metadaten Klasse = "{DateFormat: 'mmddyyyy'}". Dies erfordert das Metadaten-Plugin.
  • Kopfzeilen Option Kopfzeilen: {0: {dateFormat: 'mmddyyyy'}}.
  • Header Klassenname class = "dateFormat-mmddyyyy". Overall DateFormat Option.

In meinem Fall habe ich

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

für die Version.