2009-07-07 10 views
20

J'utilise le plugin tablesorter pour trier mes tables dans une application MVC .NET. La plupart de mes colonnes sont des chaînes et je n'ai aucun problème avec elles. Ni avec les numériques. La chose est que mes colonnes datetime sont également triées comme si elles étaient des chaînes. Ils sont triés comme ceci: 01/04/2009, 02/02/2009, 03/08/2009, etc. J'obtiens les données du Modèle dans cette Vue.Problème avec les dates de tri avec jquery tablesorter

Mon appel est celui par défaut:

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

J'ai essayé spécifier dateformat sans chance:

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

La chose étrange se produit lorsque je tape manuellement une table statique avec des dates aléatoires. Il est trié! Mais mes données proviennent d'un appel DB et sont mises dans le modèle, je l'utilise ensuite et j'écris tr avec les données.

Merci d'avance.

EDIT: Cela peut-il être lié à la façon dont je crée les tr?

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

Est-il possible de formater votre date en aaaa-mm-jj? – ScottE

+0

non, il doit être dans les paramètres de mon pays (Espagne). :(Je –

Répondre

26

Essayez d'ajouter un analyseur Tablesorter à votre colonne de date. Tablesorter est livré avec un analyseur pour shortDate, usLongDate et isoDate. Où colNum correspond à la colonne avec les dates. Le seul exemple que j'ai pu trouver sur le site de tablesorter est here. Cela fonctionne aussi si les tables classées sont incorrectes. Il y a aussi d'autres parseurs pour le pourcentage, l'adresse IP et plus encore. Jetez un oeil à la fin du code source et ils seront listés ici.

Edit: En regardant le code source, l'option dateFormat semble être à la recherche que pour "nous", "uk", "jj/mm/aa" ou "dd-mm-yy". Que se passe-t-il lorsque vous essayez "uk"?

+0

essayé aswell analyseur shorDate mais il a oublié de mentionner Pas de chance non plus :(Je vais donner un essai avec les autre date parseurs et vous faire savoir Merci –

+12

Cela a fonctionné je mets l'appel comme suit:..! $ ("# table").tablesorter ({dateFormat: 'uk'}); Je continue à me demander pourquoi, avec l'appel par défaut, fonctionne comme prévu lors de l'écriture d'une table en HTML brut et non lors de la génération de MVC (et de devoir trouver cette solution de contournement). Merci! –

+1

Encore une fois StackOverflow semble être le seul endroit avec la bonne réponse! dateFormat: 'uk' fonctionne pour moi aussi, alors que dateFormat: "jj/mm/aaaa" ne fonctionne pas. –

16

j'ai eu le même problème, et j'ai ajouté un datetime appelé analyseur personnalisé:

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

Ensuite il vous suffit d'appliquer ce format aux colonnes que vous voulez, comme Gabe G exposé (Par exemple, pour attribuer ce trieuse à la première colonne que vous devez faire ce qui suit:

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

Cela fonctionne très bien. Merci –

2

Il existe une mise à jour pour le plugin jquery tablesorter

Selon les paramètres régionaux de votre applic. ation, vous pouvez trier les dates par cette mise à jour.

Vous pouvez afficher la mise à jour du tablesorti en suivant le lien ci-dessous.

http://tablesorter.openwerk.de/

7

Vous pouvez également ajouter une balise span caché avant votre date en format numérique (aaaammjj). Ce texte viendra en premier et sera utilisé pour le tri, mais il sera caché et ne montrera que le format que vous voulez.

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

Il serait plus logique d'utiliser un attribut 'data- *' sur la cellule du tableau, plutôt que d'avoir un span en tant qu'élément enfant. –

0

utilisation de façon plus facile:

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

Pour être honnête, la solution la plus simple pour moi était, comme l'a dit compsmart, en ajoutant un texte caché devant la date réelle.

  • dateFormat: « uk » ne fonctionnait pas pour moi, peut-être parce que mon format de la date est encore différente
  • http://tablesorter.openwerk.de/ consiste à modifier le CSS, d'abord, je ne comprends pas pourquoi et deuxième l'effort est plus grand que Ajout simple de texte caché devant la date. J'aime la solution KISS de compsmart!

J'aime la solution KISS de compsmart!

0

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

Définir le format de date. Voici les options disponibles. (Modifié v2.0.23).

  • "mmjjaaaa" (par défaut)
  • "jjmmaaaa"
  • "aaaammjj"

Dans les versions précédentes, cette option a été défini comme "nous", "uk" ou « dd/mm/aa ". Cette option a été modifiée pour mieux s'adapter aux formats de date requis. Cela ne fonctionnera qu'avec des années à quatre chiffres! Le trieur doit être défini sur "shortDate" et le format de date peut être défini dans l'option "dateFormat" ou défini pour une colonne spécifique dans l'option "headers". Voir la page de démonstration pour voir le fonctionnement.

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

    }); 
}); 

colonnes individuelles peuvent être modifiées en ajoutant les éléments suivants (ils font tous la même chose), mettre en ordre de priorité (mise à jour v2.3.1):

  • données jQuery données dateFormat = » mmddyyyy ".
  • metadata class = "{dateFormat: 'mmddyyyy'}". Cela nécessite le plugin de métadonnées.
  • en-têtes d'option d'en-têtes: {0: {dateFormat: 'mmddyyyy'}}.
  • En-tête Classe nom classe = "dateFormat-mmddyyyy". Option dateFormat globale.

Dans mon cas, je l'ai utilisé

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

pour la version.

Questions connexes