Comment Trier par Date avec datables jQuery plugin?
j'utilise le plugin datatables jquery et je veux sorty par dates.
je sais qu'ils ont obtenu un plugin, mais je ne trouve pas où télécharger à partir de
http://datatables.net/plug-ins/sorting
je crois que j'ai besoin de ce fichier: dataTables.numericComma.js pourtant je ne peux pas le trouver n'importe où et quand je télécharge des données il ne semble pas être dans le fichier zip.
Je ne suis pas sûr non plus si je dois faire mon propre trieur de date personnalisé pour passer dans ce plugin.
j'essaie de trier ce format MM / JJ/YYYY HH: MM TT (AM |PM)
Merci
Modifier
Comment puis-je changer ceci pour trier par MM/jj/aaaa HH:MM TT(AM |PM) et le changer en date américaine?
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 : ((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 : ((x > y) ? -1 : 0));
};
9 réponses
cliquez sur le lien" Afficher les détails " sous Date (JJ / mm/AAAA), alors vous pouvez copier et coller ce code de plugin fourni là
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));
};
j'ai Tout basculer l' __date_[1]
(le jour) et __date_[0]
(mois), et remplacé uk
us
pour ne pas vous tromper. Je pense que cela devrait prendre soin de cela pour vous.
Mise À Jour #2: Vous devrait être en mesure d'utiliser simplement l'objet date pour la comparaison. Essayez ceci:
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));
};
Tri par Date - avec un élément masqué
convertissez la date au format YYYMMDD et ajouter de la valeur réelle ( MM/JJ / AAAA)<td>
, l'envelopper dans un élément, un ensemble de style display:none;
pour les éléments. Maintenant la date de tri un tri normale. La même chose peut être appliquée à jour en temps trier.
HTML
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>MM/DD/YYYY</td>
</tr>
</table>
CSS
#data-table span {
display:none;
}
vous devriez utiliser les attributs de données HTML5. https://www.datatables.net/examples/advanced_init/html5-data-attributes.html
il suffit d'ajouter le - pour votre td élément.
aucun plugin n'est requis.
<table class="table" id="exampleTable">
<thead>
<tr>
<th>Firstname</th>
<th>Sign Up Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td data-order="2015-11-13 12:00">13. November 2015</td>
</tr>
<tr>
<td>Daniel</td>
<td data-order="2015-08-06 13:44">06. August 2015</td>
</tr>
<tr>
<td>Michael</td>
<td data-order="2015-10-14 16:12">14. October 2015</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#exampleTable').DataTable();
});
</script>
je me rends compte qu'il s'agit d'une question vieille de deux ans, mais je l'ai quand même trouvée utile. J'ai fini par utiliser le code fourni par Fudgey mais avec un mod mineur. M'a sauvé un peu de 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));
};
à partir de 2015, le moyen le plus pratique selon moi pour trier la colonne Date dans un DataTable, est d'utiliser le requis sort plugin. Depuis le format de date dans mon cas était dd/mm/yyyy hh:mm:ss
, j'ai fini par utiliser le date-Euro plugin.
Tout ce qu'on doit faire c'est:
Etape 1: inclure le plugin de tri fichier JavaScript ou code;
Etape 2: Ajouter columnDefs
comme indiqué ci-dessous pour cible appropriée la colonne(s).
$('#example').dataTable( {
columnDefs: [
{ type: 'date-euro', targets: 0 }
]
});
juste au cas où quelqu'un a des problèmes où ils ont des espaces vides soit dans les valeurs de date ou dans les cellules, vous aurez à manipuler ces bits. Parfois un espace vide n'est pas géré par la fonction trim venant de html c'est comme "$nbsp;". Si vous ne les manipulez pas, votre tri ne fonctionnera pas correctement et cassera partout où il y a un espace vide.
j'ai aussi reçu un peu de code de jQuery extensions ici et je l'ai changé un peu pour répondre à mes besoins. Vous devriez faire le même:) cheers!
function trim(str) {
str = str.replace(/^\s+/, '');
for (var i = str.length - 1; i >= 0; i--) {
if (/\S/.test(str.charAt(i))) {
str = str.substring(0, i + 1);
break;
}
}
return str;
}
jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) {
if (trim(a) != '' && a!=" ") {
if (a.indexOf(' ') == -1) {
var frDatea = trim(a).split(' ');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
}
else {
var frDatea = trim(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 (trim(b) != '' && b!=" ") {
if (b.indexOf(' ') == -1) {
var frDateb = trim(b).split(' ');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
}
else {
var frDateb = trim(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 (trim(a) != '' && a!=" ") {
if (a.indexOf(' ') == -1) {
var frDatea = trim(a).split(' ');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
}
else {
var frDatea = trim(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 (trim(b) != '' && b!=" ") {
if (b.indexOf(' ') == -1) {
var frDateb = trim(b).split(' ');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
}
else {
var frDateb = trim(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;
};
seuls les Datatables peuvent commander par DateTime dans "ISO-8601" format, de sorte que vous devez convertir votre date dans "date-order" à ce format (exemple en utilisant Razor):
<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>
A propos de la mise à jour#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));
};
j'ai la solution après avoir travaillé toute la journée sur. C'est petite solution hacky ajouté portée à l'intérieur de td étiquette
<td><span><%= item.StartICDate %></span></td>.
le format de Date que J'utilise est JJ/MM / AAAA. Testé dans les Datatables1.9.0