Comment sortinger par date avec le plugin jquery DataTables?

J’utilise le plugin jquery des datatables et je veux sortinger par dates.

Je sais qu’ils ont un plugin mais je ne trouve pas où le télécharger réellement

http://datatables.net/plug-ins/sorting

Je crois que j’ai besoin de ce fichier: dataTables.numericComma.js pourtant je ne le trouve nulle part et quand je télécharge des datatables il ne semble pas être dans le fichier zip.

Je ne sais pas non plus si je dois créer mon propre sortingeur de date personnalisé pour passer dans ce plugin.

J’essaie de sortinger ce format MM / JJ / AAAA HH: MM TT (AM | PM)

Merci

modifier

Comment puis-je changer cela pour sortinger par MM / JJ / AAAA HH: MM TT (AM | PM) et le changer à la date US?

jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) { var ukDatea = a.split('/'); var ukDateb = b.split('/'); var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1; return ((x  y) ? 1 : 0)); }; jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) { var ukDatea = a.split('/'); var ukDateb = b.split('/'); var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1; return ((x  y) ? -1 : 0)); }; 

Cliquez sur le lien “Afficher les détails” sous Date (jj / mm / AAAA) , puis copiez et collez le code fourni ici


Mise à jour: Je pense que vous pouvez simplement changer l’ordre du tableau, comme ceci:

 jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) { var usDatea = a.split('/'); var usDateb = b.split('/'); var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1; var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1; return ((x < y) ? -1 : ((x > y) ? 1 : 0)); }; jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) { var usDatea = a.split('/'); var usDateb = b.split('/'); var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1; var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1; return ((x < y) ? 1 : ((x > y) ? -1 : 0)); }; 

Tout ce que j’ai fait a été de changer le __date_[1] (jour) et le __date_[0] (mois), et __date_[0] remplacé uk avec us pour que vous ne soyez pas confus. Je pense que cela devrait en prendre soin pour vous.


Mise à jour n ° 2: Vous devriez pouvoir utiliser l’object de date à des fins de comparaison. Essaye ça:

 jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) { var x = new Date(a), y = new Date(b); return ((x < y) ? -1 : ((x > y) ? 1 : 0)); }; jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) { var x = new Date(a), y = new Date(b); return ((x < y) ? 1 : ((x > y) ? -1 : 0)); }; 

Date Sort – avec un élément caché

Convertissez la date au format AAAAMMJJ et ajoutez-la à la valeur réelle ( MM / JJ / AAAA ) dans le

, enveloppez-la dans un élément, définissez l’ display:none; style display:none; aux éléments. Maintenant, le sorting par date fonctionnera comme un sorting normal. La même chose peut être appliquée au sorting de date-heure.

HTML

 
YYYYMMDDMM/DD/YYYY

CSS

 #data-table span { display:none; } 

Vous devez utiliser les atsortingbuts de données HTML5. https://www.datatables.net/examples/advanced_init/html5-data-atsortingbutes.html

Ajoutez simplement l’élément d’ ordre des données à votre élément td .
Aucun plugin requirejs.

 
Firstname Sign Up Date
Peter 13. November 2015
Daniel 06. August 2015
Michael 14. October 2015

Je me rends compte que c’est une question de deux ans, mais je l’ai toujours trouvé utile. J’ai fini par utiliser l’exemple de code fourni par Fudgey mais avec un mod mineur. M’a sauvé du temps, merci!

 jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) { var x = new Date($(a).text()), y = new Date($(b).text()); return ((x < y) ? -1 : ((x > y) ? 1 : 0)); }; jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) { var x = new Date($(a).text()), y = new Date($(b).text()); return ((x < y) ? 1 : ((x > y) ? -1 : 0)); }; 

En 2015, le moyen le plus pratique de sortinger la colonne Date dans un DataTable est d’utiliser le plug-in de sorting requirejs . Comme le format de date dans mon cas était dd/mm/yyyy hh:mm:ss , j’ai fini par utiliser le plug-in date-euro . Tout ce qu’il faut faire c’est:

Étape 1: Inclure le fichier ou le code JavaScript du plug-in de sorting et;

Étape 2: Ajouter columnDefs comme indiqué ci-dessous pour cibler les colonnes appropriées.

 $('#example').dataTable( { columnDefs: [ { type: 'date-euro', targets: 0 } ] }); 

Juste au cas où quelqu’un aurait des problèmes lorsqu’il y a des espaces vides dans les valeurs de date ou dans les cellules, vous devrez gérer ces bits. Parfois, un espace vide n’est pas géré par la fonction sortingm provenant de HTML, c’est comme “$ nbsp;”. Si vous ne les manipulez pas, votre sorting ne fonctionnera pas correctement et se brisera partout où il y aura un espace vide.

J’ai aussi obtenu ce morceau de code des extensions jquery et je l’ai un peu modifié pour répondre à mes besoins. Vous devriez faire la même chose 🙂 acclamations!

 function sortingm(str) { str = str.replace(/^\s+/, ''); for (var i = str.length - 1; i >= 0; i--) { if (/\S/.test(str.charAt(i))) { str = str.subssortingng(0, i + 1); break; } } return str; } jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) { if (sortingm(a) != '' && a!=" ") { if (a.indexOf(' ') == -1) { var frDatea = sortingm(a).split(' '); var frDatea2 = frDatea[0].split('/'); var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1; } else { var frDatea = sortingm(a).split(' '); var frTimea = frDatea[1].split(':'); var frDatea2 = frDatea[0].split('/'); var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1; } } else { var x = 10000000; // = l'an 1000 ... } if (sortingm(b) != '' && b!=" ") { if (b.indexOf(' ') == -1) { var frDateb = sortingm(b).split(' '); frDateb = frDateb[0].split('/'); var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1; } else { var frDateb = sortingm(b).split(' '); var frTimeb = frDateb[1].split(':'); frDateb = frDateb[0].split('/'); var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1; } } else { var y = 10000000; } var z = ((x < y) ? -1 : ((x > y) ? 1 : 0)); return z; }; jQuery.fn.dataTableExt.oSort['uk-date-time-desc'] = function(a, b) { if (sortingm(a) != '' && a!=" ") { if (a.indexOf(' ') == -1) { var frDatea = sortingm(a).split(' '); var frDatea2 = frDatea[0].split('/'); var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1; } else { var frDatea = sortingm(a).split(' '); var frTimea = frDatea[1].split(':'); var frDatea2 = frDatea[0].split('/'); var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1; } } else { var x = 10000000; } if (sortingm(b) != '' && b!=" ") { if (b.indexOf(' ') == -1) { var frDateb = sortingm(b).split(' '); frDateb = frDateb[0].split('/'); var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1; } else { var frDateb = sortingm(b).split(' '); var frTimeb = frDateb[1].split(':'); frDateb = frDateb[0].split('/'); var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1; } } else { var y = 10000000; } var z = ((x < y) ? 1 : ((x > y) ? -1 : 0)); return z; }; 

A propos de la mise à jour n ° 1, il y a 2 problèmes:

  • Nombre de jours = 1 (j / MM / AAAA) au lieu de (jj / MM / AAAA)
  • Date vide

Voici la solution pour éviter ces problèmes:

 jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function (a, b) { var ukDatea = a.split('/'); var ukDateb = b.split('/'); //Date empty if (ukDatea[0] == "" || ukDateb[0] == "") return 1; //need to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0]; var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1; return ((x < y) ? -1 : ((x > y) ? 1 : 0)); }; //Sorting by Date jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function (a, b) { var ukDatea = a.split('/'); var ukDateb = b.split('/'); //Date empty if (ukDatea[0] == "" || ukDateb[0] == "") return 1; //MANDATORY to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0]; var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1; return ((x < y) ? 1 : ((x > y) ? -1 : 0)); }; 

Les datatables ne peuvent commander que par DateTime au format “ISO-8601” , vous devez donc convertir votre date en “date-order” dans ce format (exemple avec Razor):

 @myDate.ToShortDateSsortingng() - @myDate.ToShortTimeSsortingng() 

J’ai trouvé une solution après avoir travaillé toute la journée là-dessus. C’est une petite solution pirate Ajouté span à l’intérieur de la balise td

 <%= item.StartICDate %>. 

Le format de date que j’utilise est jj / MM / AAAA. Testé dans les bases de données1.9.0