bootstrap - tablesorter jquery cdn
Fecha Problema de clasificación con Jquery Tablesorter (7)
Estoy intentando ordenar una tabla que tiene una columna como 2009-12-17 23:59:59.0 . Estoy usando a continuación para aplicar orden
$(document).ready(function()
{
$("#dataTable").tablesorter();
}
);
Pero no está funcionando para las fechas de formato aaaa-mm-dd. ¿Alguien puede sugerir cómo puedo aplicar este formato para clasificar?
Con la última versión 2.18.4, simplemente puede hacer esto. Solo proporcione el formato de fecha predeterminado y en la columna particular, establezca el formato de fecha de la columna. Esto funcionará SOLAMENTE con el clasificador ''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 }
}
});
Lo correcto sería agregar su propio analizador para este formato personalizado.
Marque esto para comprender cómo funciona.
jQuery Tablesorter: Agrega tu propio analizador
Luego eche un vistazo a la fuente de tablesorter (busque uslongdate, shortdate y luego vea cómo los analizadores de los formatos de fecha se realizan internamente por tablesorter. Ahora construya un analizador similar para su formato de fecha en particular.
Esto debería funcionar a tu gusto.
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"
});
Ahora simplemente aplíquelo a la columna donde tiene este formato (por ejemplo, suponiendo que la columna en la que residen sus fechas personalizadas está en la columna No. 7) (6 significa columna 7, porque la matriz de las columnas está en cero)
$(function() {
$("table").tablesorter({
headers: {
6: { sorter:''customDate'' }
}
});
});
Ordene el formato de fecha del Reino Unido / Europa dd / mm / aaaa por:
$("#tableName").tablesorter({dateFormat: "uk"});
Simplemente agregar otra opción funciona perfectamente para que yo ordene el formato de fecha ( dd / MM / aaaa hh: mm: ss ). Usando el plugin js dataTables .
Agregue el siguiente código a su código:
$(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;
}
} );
dateFormat: "mmddyyyy", // establece el formato de fecha predeterminado
No es necesario crear un nuevo analizador, solo use el existente con poca modificación.
1. Abra el complemento Jquery js, donde verá la siguiente secuencia de comandos. Ahora solo cambie el formato de fecha (deseado) para el último, si en su caso es "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})/, "$3/$1/$2");
} else if (c.dateFormat == "uk") {
// reformat the string in ISO format
s = s.replace(/(/d{1,2})[///-](/d{1,2})[///-](/d{4})/, "$3/$2/$1");
} else if (c.dateFormat == "yy-mm-dd" || c.dateFormat == "dd-mm-yy") {
s = s.replace(/(/d{1,2})[///-](/d{1,2})[///-](/d{2})/, "$1/$2/$3");
}
return $.tablesorter.formatFloat(new Date(s).getTime());
}, type: "numeric"
});
2. Ahora sigue el último paso mencionado por jitter, pero con poca modificación.
$(function() {
$("table").tablesorter({
headers: {
6: { sorter:''shortDate'' }
}
});
});
Si está utilizando un formato de fecha / hora como mm / dd / aaaa hh: mm, utilice a continuación
$.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"} );