jueves, 21 de abril de 2011

como ordenar columnas de tipo date y datetime usando jquery.DataTables

Este articulo va dedicado a todos aquellos que usan DataTables, para mostrar sus datos, y desean poder ordenar por columnas que contengan como tipo de dato fecha en cualquier formato....

segun la documentacion, en la inicializacion del datatable, el reconoce por defecto el tipo de dato de cada columna (string, date, numeric, por defecto), y basado en el, escoge la funcion a usar para ordenar esta columna.

cuando la fecha a mostrar en la tabla, tiene formatos no compatibles con javascript, es decir
Date.parse("Jan. 1, 2011, 3 a.m.") == NaN

pues empiezan los problemas, y no se consigue ordenar la columna tan facilmente, ya que tenemos que implementar funciones que parseen el valor mostrado para luego poder compararlos, como ejemplo cito el pluging de
sedovsek (https://github.com/sedovsek/DataTables-EU-date-Plug-In), cuyo objetivo es poder parsear, comparar y por tanto ordenar columnas que tengan como tipo de dato fecha en formato europeo.

Pero que si mi columna no tiene ese formato, tendria que tener un plugign por cada formato en que vaya a mostrar la fecha.

Mi solución fue buscar un mecanismo independiente del formato en que se muestre la fecha,

para cada columna que muestra valores de tipo fecha, agregamos otra columna (invisible) en el DOM, que contenga los valores en timestamp, y diciendole a Datable, que cuando vaya a ordenar la columna de la fecha, se guia por la columna que tiene el timestamp..

Aqui va:

<script>
$(document).ready(function() {
$('table#timeline').dataTables({
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 1 ] }
],
"aoColumns": [
{ "iDataSort": 1 },
null,
null,
]
});


});
</script>


<table id="timeline">
<thead>
<th>Date created<th>
<th>timestamp Date created</th>
<th>Text</th>
</thead>
<tbody>
{% for status in statuses %}
<tr>
<td>{{ status.date_created }}</td>
<td>{{ status.date_created|date:"U" }}</td>
<td>{{ status.text }}</td>
</tr>
{% endfor %}

</tbody>
</table>


espero les sea util, y que vengan los comentarios!!!

2 comentarios:

  1. Gracias por el aporte me ha servido bastante, solo que no me funciono lo de:

    "aoColumnDefs": [
    { "bVisible": false, "aTargets": [ 1 ] }
    ],

    así que a la columna que tiene el timestamp le agregue style = "display: none"

    ResponderEliminar
  2. El plugin también nos permite indicar al cargar la página, por que columna queremos que salga ordenado y si lo queremos ascendente (ASC) o descendente (DESC). Para conseguir esto, debemos de indicar el número de columna al que hacer referencia. Si por ejemplo queremos que aparezca ordenado por la última columna, el código que debemos de poner es el siguiente.

    $(document).ready(function() {
    $('#example').dataTable( {
    "aaSorting": [[ 0, "desc" ]]
    });

    Referencia:
    http://www.programacion.com/articulo/datatables-_un_plugin_de_jquery_para_manejar_tablas_474

    ResponderEliminar