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)); };
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:
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