sort - jquery datatable date format dd mm yyyy
Datatable date sorting dd/mm/yyyy issue (19)
Fecha de clasificación: con un elemento oculto
Convierta la fecha al formato YYYYMMDD y anteceda al valor real ( DD / MM / YYYY ) en <td> , envuélvalo en un elemento, configure la display:none; estilo display:none; a los elementos. Ahora el tipo de fecha funcionará como un tipo normal. Lo mismo se puede aplicar al ordenamiento de fecha y hora.
HTML
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>DD/MM/YYYY</td>
</tr>
</table>
CSS
#data-table span {
display:none;
}
Estoy usando un plugin Jquery llamado datatables
Es fantástico, sin embargo, no puedo obtener las fechas para ordenar correctamente de acuerdo con el formato dd / mm / aaaa.
He revisado sus formatos de soporte pero ninguna de estas correcciones parece funcionar.
¿Puede alguien aquí ayudarme por favor?
Solución jQuery
Aquí está trabajando la solución jQuery .
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
var ukDatea = a.split(''/'');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},
"date-uk-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
Agregue el código anterior al script y establezca la columna específica con valores de fecha con { "sType": "date-uk" } y otros como nulos, consulte a continuación:
$(document).ready(function() {
$(''#example'').dataTable( {
"aoColumns": [
null,
null,
null,
null,
{ "sType": "date-uk" },
null
]
});
});
Solución CSS
Si desea una solución rápida, puede agregar el valor actual de DateTime en cada fila en el formato específico (YYYYMMDD) y ocultarlo mediante CSS, lo que le permitirá ordenar esa columna sin ningún cambio de javascript.
Aquí está la solución CSS de trabajo
HTML
<td><span class=''hide''>YYYYMMDD</span>DD/MM/YYYY</td>
CSS
.hide {
display:none;
}
Como encontré la manera más fácil de ordenar en este caso es agregando la opción ''aaSorting'' en el JS.
Por ejemplo:
$(document).ready(function() {
$(''#contacts-table'').dataTable({
"aaSorting": [0, ''desc'']
});
El problema aquí es que este ejemplo clasificará las entradas de la columna 1ª como STRING pero no como las fechas. Si el código fuente le permite cambiar el formato de fecha de dd / mm / aaaa a aaaa / mm / dd, "aaSorting" funcionará correctamente para usted.
Esta solución es completamente incorrecta. No puede convertir una fecha en un número simplemente agregando cada componente de la fecha. Si prueba esta lógica, por ejemplo, con las siguientes fechas, verá que no coincidirá correctamente:
20/01/2014 = 2035 15/02/2014 = 2031
La fecha de la bruja es lo primero, ¿asciende? 20 de enero? No de acuerdo con esta lógica: P
La forma correcta de hacer el método de parsedate es convertir la cadena a una fecha de tiempo válida, y ellos usan la función getTime para ordenar la tabla apropiadamente.
var day = a.split(''/'')[0]
var month = a.split(''/'')[1]
var year = a.split(''/'')[2]
var date = new Date(month + "/" + day + "/" + year)
return date.getTime()
Intenté esto y funcionó para mí.
https://github.com/sedovsek/DataTables-EU-date-Plug-In
.ToString("dd/MM/yyyy"); modo de formato .ToString("dd/MM/yyyy"); entonces en mi jQuery.Datatable funciona bien.
jQ abajo
oTable = $(''#grid'').dataTable({
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sType": "eu_date" },
null
]
});
});
La columna que tiene fechas, debe definirla con el tipo S como el código anterior.
La forma más fácil de resolver este problema
Simplemente modifica tu diseño un poco como este
//Add this data order attribute to td
<td data-order="@item.CreatedOn.ToUnixTimeStamp()">
@item.CreatedOn
</td>
Add create this Date Time helper function
// #region Region
public static long ToUnixTimeStamp(this DateTime dateTime) {
TimeSpan timeSpan = (dateTime - new DateTime(1970, 1, 1, 0, 0, 0));
return (long)timeSpan.TotalSeconds;
}
#endregion
La solución de Zaheer Ahmed funciona bien si tiene que lidiar con una fecha ya formateada en el Reino Unido.
Tuve un problema con esta solución porque tenía que administrar la fecha formateada de EE. UU.
Lo descubrí con este pequeño cambio:
function parseDate(a) {
var ukDatea = a.split(''/'');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
}
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
return parseDate(a);
},
"date-uk-asc": function ( a, b ) {
a = parseDate(a);
b = parseDate(b);
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function ( a, b ) {
a = parseDate(a);
b = parseDate(b);
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
Seguido por su definición de "aoColumns".
Lo que parece funcionar para mí fue
presione el objeto datetime completo obtenido con una consulta de selección de mi db en un conjunto de datos que se dibujará mediante el formato datatable "2018-01-05 08:45:56"
entonces
$(''#Table'').DataTable({
data: dataset,
deferRender: 200,
destroy: true,
scrollY: false,
scrollCollapse: true,
scroller: true,
"order": [[2, "desc"]],
''columnDefs'': [
{
''targets'': 2,
''createdCell'': function (td, cellData, rowData, row, col) {
var datestamp = new Date(cellData);
$(td).html(datestamp.getUTCDate() + ''-'' + (datestamp.getMonth()+1) + ''-'' + datestamp.getFullYear());
}
}
],
"initComplete": function(settings, json) {
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
}
});
Las filas se ordenan correctamente, luego obtengo un html que quiero en la fila
Mire esta solución oficial de DataTable '', utilizando Moment.js:
Plug-in de clasificación de fecha / hora definitiva
Otra solución: this
con 2 librerías javascripts: //cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js y //cdn.datatables.net/plug-ins/1.10.15/sorting/datetime -moment.js
entonces solo esto:
$ (document) .ready (function () {
$.fn.dataTable.moment( ''DD/MM/YYYY'' ); $(''#example'').DataTable();});
Pruebe this plugin
Como se indica here , debe incluir Moment.js y el complemento datatable-moment, luego solo declare el formato de fecha que está utilizando. El complemento detectará automáticamente las columnas de fecha y lo ordenará como debería ser. Para las explicaciones de formato de moment.js, verifique here .
Ejemplo:
$(document).ready(function() {
$.fn.dataTable.moment(''DD/MM/YYYY HH:mm'');
$(''#example'').DataTable();
});
Quería señalar que cuando se usan datos del servidor a través de Ajax , la solución es súper simple, pero puede no ser inmediatamente obvia.
Al devolver la matriz de orden de clasificación, Datatables enviará (en $_POST ) una matriz de 2 elementos que sería equivalente a:
$_POST[''order''][0] =array(''column''=>''SortColumnName'', ''dir''=>''asc'');
// 2nd element is either ''asc'' or ''desc''
Por lo tanto, puede mostrar la fecha en cualquier formato que desee; solo sortColumnName que su servidor devuelva los criterios de clasificación basados únicamente en sortColumnName .
Por ejemplo, en PHP (con MySQL), uso lo siguiente:
if (isset($_POST[''order''])) {
switch ($_POST[''order''][0][''column'']) {
case 0:// sort by Primary Key
$order = ''pkItemid'';
break;
case 1:// Sort by reference number
$order = ''refNo'';
break;
case 2://Date Started
$order = ''dOpen'';
break;
default :
$order = ''pkItemid'';
}
$orderdir = ($_POST[''order''][0][''dir''] === ''desc'') ? ''desc'' : ''asc'';
}
Tenga en cuenta que, dado que no se pasa nada de $_POST a $order o $orderdir , no es posible realizar un ataque de script cruzado.
Ahora, solo anexe a una consulta MySQL:
$sql ="SELECT pkItemid, refNo, DATE_FORMAT(dOpen,''%b %e, %Y'') AS dateStarted
FROM tblReference
ORDER BY $order $orderdir;";
ejecuta la consulta y devuelve solo el valor de dateStarted a Datatables en json.
Sé que esta es una vieja pregunta y las respuestas también son viejas. Recientemente me encontré con una forma simple y limpia de ordenar las fechas. Se puede realizar mediante el atributo de data-order HTML5 al elemento <td> .
Esto es lo que hice en mi PHP:
<?php
$newdate = date(''d M Y'', $myDateTime); // Format in which I want to display
$dateOrder = date(''Y-m-d'', $myDateTime); // Sort Order
?>
<td data-order="<?php echo $dateOrder; ?>" >
<?php echo $newdate; ?>
</td>
Si no desea utilizar momentum.js o cualquier otro formateo de fecha, puede anteponer un formato de fecha en milisegundos en el valor de fecha para que el ordenamiento se lea según su milisegundo. Y oculte el formato de fecha de milisegundos.
Código de muestra:
var date = new Date();
var millisecond = Date.parse(date);
HTML
<td>''<span style="display: none;">'' + millisecond + "</span>" + date + </td>
Eso es.
Usé en la llamada de descanso
** La variable de fecha es: Creado **
var call = $.ajax({
url: "../_api/Web/Lists/GetByTitle(''NewUser'')/items?$filter=(Created%20ge%20datetime''"+FromDate+"'')%20and%20(Created%20le%20datetime''"+ToDate+"'' and Title eq ''"+epf+"'' )&$top=5000",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
$(''#example'').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aLengthMenu" : [
[50,100],
[50,100]
],
dom: ''Bfrtip'',
buttons: [
''copy'', ''csv'', ''excel''
],
"aoColumnDefs": [{ "bVisible": false }],
"aoColumns": [
{ "mData": "ID" },
{ "mData": "Title" },
{ "mData": "EmployeeName" },
{ "mData": "Department1" },
{ "mData": "ServicingAt" },
{ "mData": "TestField" },
{ "mData": "BranchCode" },
{ "mData": "Created" ,"render": function (data, type, row) {
data = moment(data).format(''DD MMM YYYY'');
return data;
}
Utilice el atributo de data-order en la etiqueta <td> como tal ( Ejemplo de Ruby ):
<td data order=''<%=rentroll.decorate.date%>''><%=rentroll.decorate.date%></td>
Su función de decorador aquí sería:
def date
object.date&.strftime("%d/%m/%Y")
end
Yo también tengo el mismo problema.
Estaba usando span en td como el 03/21/2017, al hacer esto, datatable lo trató como una cadena y la ordenación no funcionó.
Quité span dentro de td, y se solucionó. como, 21/03/2017
en php o js simplemente pasa una matriz y usa ortogonal, como:
$var[0][0] = "like as u wish, 30/12/2015 or something else";
$var[0][1] = strtotime($your_date_variable);
y, en datatable ...
$(''#data-table-contas_pagar'').dataTable({
"columnDefs": [
{"targets":[0],"data": [0],"render": {"_": [0],"sort": [1]}}
]
});
usa este fragmento!
$(document).ready(function() {
$.fn.dataTable.moment = function ( format, locale ) {
var types = $.fn.dataTable.ext.type;
// Add type detection
types.detect.unshift( function ( d ) {
return moment( d, format, locale, true ).isValid() ?
''moment-''+format :
null;
} );
// Add sorting method - use an integer for the sorting
types.order[ ''moment-''+format+''-pre'' ] = function ( d ) {
return moment( d, format, locale, true ).unix();
};
};
$.fn.dataTable.moment(''DD/MM/YYYY'');
$(''#example'').DataTable();
});
el momento en que js funciona bien para todos los formatos de fecha y hora, agregue este snipper antes de inicializar la tabla de datos como lo hice anteriormente.
Recuerde también cargar el Moment.js