fecha - ordenar datatable jquery
¿Cómo ordenar por fecha con DataTables jquery plugin? (9)
Estoy usando el plugin de datos de jquery y quiero arreglarlo por fechas.
Sé que tienen un complemento pero no puedo encontrar dónde descargarlo realmente
http://datatables.net/plug-ins/sorting
Creo que necesito este archivo: dataTables.numericComma.js, sin embargo, no puedo encontrarlo en ningún lugar y cuando descargo datos que no parecen estar en el archivo.
Tampoco estoy seguro de si necesito hacer mi propio clasificador de fechas personalizado para pasar a este complemento.
Estoy intentando ordenar este formato MM / DD / YYYY HH: MM TT (AM | PM)
Gracias
Editar
¿Cómo puedo cambiar esto para ordenar por MM / DD / YYYY HH: MM TT (AM | PM) y cambiarlo a la fecha de EE. UU.?
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));
};
Orden de fecha - con un elemento oculto
Convierta la fecha al formato YYYYMMDD y agregue al valor real ( MM / DD / YYYY ) en <td> , envuélvalo en un elemento, configure el estilo de display:none; a los elementos. Ahora la ordenación por fecha funcionará como una ordenación normal. Lo mismo se puede aplicar a la ordenación fecha-hora.
HTML
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>MM/DD/YYYY</td>
</tr>
</table>
CSS
#data-table span {
display:none;
}
A partir de 2015, la forma más conveniente, según yo, para ordenar la columna Fecha en una tabla de datos, es usar el complemento de clasificación requerido . Dado que el formato de fecha en mi caso era dd/mm/yyyy hh:mm:ss , terminé usando el complemento date-euro . Todo lo que hay que hacer es:
Paso 1: incluya el archivo o código JavaScript del complemento de clasificación y;
Paso 2: agregue columnDefs como se muestra a continuación para apuntar a la (s) columna (s) apropiada (s).
$(''#example'').dataTable( {
columnDefs: [
{ type: ''date-euro'', targets: 0 }
]
});
Acerca de la actualización # 1, hay 2 problemas:
- Número de días = 1 (d / MM / YYYY) en lugar de (dd / MM / YYYY)
- Fecha vacía
Aquí está la solución para evitar estos problemas:
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));
};
En caso de que alguien esté teniendo problemas con los espacios en blanco en los valores de fecha o en las celdas, tendrá que manejar esos bits. A veces, la función de recorte que viene de html no maneja un espacio vacío, es como "$ nbsp;" Si no maneja esto, su clasificación no funcionará correctamente y se interrumpirá donde haya un espacio en blanco.
También obtuve este fragmento de código de las extensiones jquery aquí y lo cambié un poco para satisfacer mis necesidades. Deberías hacer lo mismo :) saludos!
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;
};
Haga clic en el enlace "mostrar detalles" debajo de Fecha (dd / mm / YYY) , luego puede copiar y pegar el código del complemento que se proporciona allí
Actualización: Creo que puedes cambiar el orden de la matriz, así:
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));
};
Todo lo que hice fue cambiar el __date_[1] (día) y __date_[0] (mes), y reemplazó el uk con us para que no se confunda. Creo que eso debería hacerse cargo de ti.
Actualización # 2: Debería poder usar el objeto de fecha solo para comparación. Prueba esto:
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));
};
Los datos de datos solo se pueden ordenar por DateTime en formato "ISO-8601" , por lo que tiene que convertir su fecha en "orden de fecha" a este formato (ejemplo utilizando Razor):
<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>
Me doy cuenta de que esta es una pregunta de dos años, pero todavía la encontré útil. Terminé usando el código de muestra proporcionado por Fudgey pero con un mod menor. Me salvó un tiempo, gracias!
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));
};
Tengo solución después de trabajar todo el día en él. Es una pequeña solución hacky.
<td><span><%= item.StartICDate %></span></td>.
El formato de fecha que estoy usando es dd / MM / YYYY. Probado en Datatables1.9.0
Usted debe hacer uso de los atributos de datos HTML5. https://www.datatables.net/examples/advanced_init/html5-data-attributes.html
Solo agrega el elemento de orden de datos a tu elemento td .
No se requieren complementos.
<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>