Ordenar columna fecha en jquery datatables

datatables-fecha-colDatatables, el famoso plugin para Jquery que muestra datos en tablas ordena las columnas de forma alfabética, por lo que cuando en una columna tenemos una fecha en formato español (dd/mm/yyyy) la ordenación que se produce no es la deseada, pues obviamente no tiene en cuenta el significado que le damos a dicha fecha, ordenando alfabéticamente por los días sin tener en cuenta mes ni año.

Una solución posible es desarrollar los propios métodos de ordenación para datatables, pero si queremos realizar esto mismo más rápido y con mejor performance, hay un truco muy sencillo, que consiste en poner la fecha en formato inglés (YYYYMMDD) dentro de un div oculto, con lo que el o la usuaria final no lo verá, pero datatables si tendrá en cuenta dicho valor de cara a la ordenación.

Ejemplo de la como quedaría la columna de fecha:

<td><span style='display: none;'>20150221</span>21/02/2015</td>

Truco raṕido y sencillo.

 

4562 visitas.

15 comentarios sobre “Ordenar columna fecha en jquery datatables

  1. Hola, algun dato mas de como es que funciona esta solución y como es que solo toma el numero que esta oculto y no el otro?

    Me estoy rompiendome la cabeza con este problema en datatable…tengo mis fechas con el formato dd/mm/yyyy HH:mm, voy a probar tu solucion a ver como resulta y luego les cuento. los datos de la fecha los obtengo de la bd en formato de milisegundos y luego les doy el formato mensionado, asi que calculo que seria lo mismo que ponerlos en formato ingles como comentas…

    Saludos y gracias

  2. Hola Leo,

    Como datatables ordena alfanuméricamente los datos de las columnas, el truco consiste en poner ese <span> con la fecha en formato inglés YYYYMMDD oculto, para que no sea visible por el usuario, pero si por datatable.

    Y las fechas en formato inglés si se ordenan alfanuméricamente como necesitamos, pues al ir el año, mes y día en ese orden, la menor siempre es la menor y la mayor idem.

    Un saludo y suerte con esa datatable 😉

     

  3. Gracias! creo que funciono!, debo revisar bien los datos pero a simple vista parece perfecto, siempre tuve en mente esta solucion pero por algún motivo mi cabeza decia que no podia ser tan simple y buscaba cosas mas complejas y modificaciones en el plugin de datatable….horas tirada a la basura por no empezar por lo mas simple….no será la primera ni última vez que nos pase eso.   Saludos y gracias nuevamente.

  4. Hola, alguna idea de cómo convertir una columna que muestra fechas en timestamp( las recibe de un backend en Java) a date con el plugin datatables. Gracias 

  5. No funciona, tengo la version 1.10.2 y por mucho que pongas el span oculto y filtres por dd/mm/yyyy o YYYYmmdd no funciona ni una ni otra.

  6. Me refiero con dos inputs y un range, desde el input del buscador por defecto que lleva datatables si funciona.

    Vease el ejemplo del filtro por rango (edad / age)

  7. Me funciono a toda cumbia, puse el Span primero en los TD del datatables y luego el formato para el usuario (hasta con icono) y me los ordeno impecable.

    2016-12-19 19-12-2016

    Genial, gracias men!

  8. Excelente!!!Aqui un ejemplo como lo hize

    Curso
    Fecha
    Nota

    #{curso.getNombre()}
    #{curso.obtenerFechaIngles()}#{curso.obtenerFechaCastellano()}
    #{curso.getPuntaje()}

    Y en el bean
    public String obtenerFechaIngles() {
    SimpleDateFormat dateFormat = new SimpleDateFormat(“YYYYMMdd”);
    String fechaActual= dateFormat.format(getFecha());
    return fechaActual;
    }
    public String obtenerFechaCastellano() {
    SimpleDateFormat dateFormat = new SimpleDateFormat(“dd/MM/yyyy”);
    String fechaActual= dateFormat.format(getFecha());
    return fechaActual;
    }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *