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!!!