problème de tri de la date avec jQuery Tablesorter
j'essaie de trier une table qui a une colonne comme 2009-12-17 23:59:59.0.
Je suis aide-dessous pour appliquer le tri
$(document).ready(function()
{
$("#dataTable").tablesorter();
}
);
mais cela ne fonctionne pas pour les dates de format AAAA-mm-JJ. Est-ce que quelqu'un peut suggérer comment appliquer ce format pour le tri?
7 réponses
La bonne chose à faire serait d'ajouter votre propre analyseur syntaxique pour ce format personnalisé.
vérifiez ceci pour avoir une idée de comment cela fonctionne.
jQuery Tablesorter: ajouter votre propre analyseur
puis jetez un coup d'oeil dans la source de tablesorter (rechercher uslongdate, shortdate et ensuite regarder comment les analyseurs pour les formats de date sont faits en interne par tablesorter. Maintenant construisez votre auto un analyseur similaire pour votre date particulière format.
Cela devrait fonctionner à votre goût
ts.addParser({
id: "customDate",
is: function(s) {
//return false;
//use the above line if you don't want table sorter to auto detected this parser
//else use the below line.
//attention: doesn't check for invalid stuff
//2009-77-77 77:77:77.0 would also be matched
//if that doesn't suit you alter the regex to be more restrictive
return /\d{1,4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}\.\d+/.test(s);
},
format: function(s) {
s = s.replace(/\-/g," ");
s = s.replace(/:/g," ");
s = s.replace(/\./g," ");
s = s.split(" ");
return $.tablesorter.formatFloat(new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]).getTime()+parseInt(s[6]));
},
type: "numeric"
});
il suffit maintenant de l'appliquer à la colonne où vous avez ce format (par exemple en supposant que la colonne dans laquelle vos dates de résidence personnalisées résident sont dans la colonne n ° 7. (6 signifie colonne 7, parce que le tableau des colonnes est zérobasé)
$(function() {
$("table").tablesorter({
headers: {
6: { sorter:'customDate' }
}
});
});
Trier royaume-UNI/European format de date jj/mm/aaaa par:
$("#tableName").tablesorter({dateFormat: "uk"});
si vous utilisez le format date/heure comme mm / jj/aaaa hh: mm alors utilisez
$.tablesorter.addParser({
id: "customDate",
is: function(s) {
//return false;
//use the above line if you don't want table sorter to auto detected this parser
//21/04/2010 03:54 is the used date/time format
return /\d{1,2}\/\d{1,2}\/\d{1,4} \d{1,2}:\d{1,2}/.test(s);
},
format: function(s) {
s = s.replace(/\-/g," ");
s = s.replace(/:/g," ");
s = s.replace(/\./g," ");
s = s.replace(/\//g," ");
s = s.split(" ");
return $.tablesorter.formatFloat(new Date(s[2], s[1]-1, s[0], s[3], s[4]).getTime());
},
type: "numeric"} );
Avec la dernière version 2.18.4 vous pouvez simplement faire comme ceci.Il suffit de donner le format de date par défaut et dans la colonne particulière définir le format de date de colonne cela fonctionnera seulement avec la trieuse 'shortDate'.
$('YourTable').tablesorter(
{
dateFormat:'mmddYYYY',
headers: {
0: { sorter: false },
1: { sorter: true},
2: { sorter: true },
3: { sorter: true },
4: { sorter: "shortDate", dateFormat: "ddmmyyyy" },
5: { sorter: true },
6: { sorter: false },
7: { sorter: false },
8: { sorter: false },
9: { sorter: false },
10: { sorter: false },
11: { sorter: false }
}
});
Pas besoin de créer un nouveau parser il suffit d'utiliser celui existant avec peu de modifications.
1. Open jQuery plugin js, où vous verrez le script ci-dessous.Maintenant, il suffit de changer le format de date(désiré) pour le dernier autre si dans votre cas il est "yy-mm-dd".
ts.addParser({
id: "shortDate",
is: function (s) {
return /\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/.test(s);
}, format: function (s, table) {
var c = table.config;
s = s.replace(/\-/g, "/");
if (c.dateFormat == "us") {
// reformat the string in ISO format
s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "//");
} else if (c.dateFormat == "uk") {
// reformat the string in ISO format
s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "//");
} else if (c.dateFormat == "yy-mm-dd" || c.dateFormat == "dd-mm-yy") {
s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/, "//");
}
return $.tablesorter.formatFloat(new Date(s).getTime());
}, type: "numeric"
});
2. maintenant, suivez la dernière étape mentionnée par jitter, mais avec peu de modifications.
$(function() {
$("table").tablesorter({
headers: {
6: { sorter:'shortDate' }
}
});
});
dateFormat : "jjmmaaaa", // définir le format de date par défaut
il suffit d'ajouter un autre choix fonctionne parfaitement pour moi de trier le format date ( JJ / MM / aaaa hh:mm:ss). En utilisant le js dataTables plugin.
ajouter le code ci-dessous à votre code is:
$(document).ready(function () {
oTable = $('#AjaxGrid').dataTable({
"aLengthMenu": [[5, 10, 25, 50, 100, 500,1000,-1], [5, 10, 25, 50, 100,500,1000,"All"]],
iDisplayLength: 1000,
aaSorting: [[2, 'asc']],
bSortable: true,
aoColumnDefs: [
{ "aTargets": [ 1 ], "bSortable": true },
{ "aTargets": [ 2 ], "bSortable": true },
{ "aTargets": [ 3 ], "bSortable": true },
{ "aTargets": [ 4 ], "bSortable": true },
{"aTargets": [ 5 ], "bSortable": true, "sType": "date-euro"},
{"aTargets": [ 6 ], "bSortable": true, "sType": "date-euro"},
{ "aTargets": [ 7 ], "bSortable": false }
],
"sDom": '<"H"Cfr>t<"F"ip>',
"oLanguage": {
"sZeroRecords": "- No Articles To Display -",
"sLengthMenu": "Display _MENU_ records per page",
"sInfo": " ", //"Displaying _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": " ", //"Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)"
},
"bJQueryUI": true
});
});
//New code
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-euro-pre": function ( a ) {
if ($.trim(a) != '') {
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 = 10000000000000; // = l'an 1000 ...
}
return x;
},
"date-euro-asc": function ( a, b ) {
return a - b;
},
"date-euro-desc": function ( a, b ) {
return b - a;
}
} );