1

Estoy teniendo problemas para ordenar por la columna fecha usando el plugin DataTables.js

He seguido esta guía desde la web oficial: https://datatables.net/blog/2014-12-18

Añadido ambas librerías:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js" type="text/javascript"></script>
   <script src="//cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.js" type="text/javascript"></script>

Y llamado a la función con el formato que uso:

$.fn.dataTable.moment('d M, Y');
$(".datatable").dataTable( {
    dom: 'Bfrtlpi',
    buttons: [
         'copy', 'excel', 'pdf', 'print'
    ],
    pageLength: 25,
    responsive: true
} );

Luego imprimo la fecha en el mismo formato y nada...

<?php echo date("d M, Y",strtotime($his->fields["returned_at"])); ?>

He probado modificando el formato y nada, tampoco ordena... ¿Alguien sabría como solucionarlo?

4
  • ¿Alguien sabe como solucionarlo?
    – Charlie
    el 21 may. 2020 a las 12:01
  • EL plugin de Datatable viene con un filtro casi por defecto, donde puede buscar por cualquier dato que exista en la tabla
    – Juan Pablo
    el 26 may. 2020 a las 14:58
  • @JuanPablo Si, la libreria viene con filtros por defecto, pero el problema reside en los filtros por fechas, ya que usa el número de día pero no la fecha al completo para ordenar. Dejo aquí un gif de ejemplo: gyazo.com/71429ec7a7a1c0ee13619a7e9c56949b
    – Charlie
    el 26 may. 2020 a las 18:20
  • ahh entiendo, yo los tengo y me los ordena pero estan en formato DD/MM/AAAA
    – Juan Pablo
    el 26 may. 2020 a las 19:18

2 respuestas 2

3
+50

El problema esta en que estas colocando mal el formato, te estas guiando por el formato de PHP y no es correcto ya que es diferente al formato de la librería moment.js

Formatos de la librería moment.js
https://momentjs.com/docs/#/parsing/string-format/

En tu caso el formato que debes agregar es 'DD MMM, YYYY':

$.fn.dataTable.moment('DD MMM, YYYY');  
$(".datatable").dataTable( {
     dom: 'Bfrtlpi',
     buttons: [
           'copy', 'excel', 'pdf', 'print'
     ],
     pageLength: 25,
     responsive: true
}); 

El formato que agregues es sensible a minúsculas y mayúsculas.

Los meses de las fechas se toman en ingles; para colocarlo en español, debes usar moment.locale()

Ejemplo corriendo:
http://live.datatables.net/talaquki/1/edit

2
  • 1
    Perfecto! Lo he probado y ahora funciona correctamente! Muchas gracias... Según leí en la guía tenía que poner el mismo formato de impresión que en el fn.dataTable, así que ahí estaba mi error...
    – Charlie
    el 27 may. 2020 a las 15:15
  • 1
    (Perdona, se me olvido aplicar los puntos, creí que al darle el tick los aplicaba)
    – Charlie
    el 1 jun. 2020 a las 2:22
0

Que tal espero te sirva este ejemplo de mi partelo realize de esta forma que es segun la opcion que escojan es la columna donde se filtra por el rango de fecha de que seleccionen en los inputs date, en cual a las columnas que donde filtro les coloque un tipo de dato para identificarlas. de esta forma

{data: 'RenewalDate', type:"text"},
 {data: 'SignupDate', type:"date"},

esto es donde se realiza el filtro

 $.fn.dataTable.ext.search.push(
  function (settings, data, dataIndex) {
           if ( $.inArray( settings.nTable.getAttribute('id'), allowFilter ) == -1 )
            {
               // if not table should be ignored
               return true;
            }

    var Range = $("#range").val();//escojo en que columna se filtrara

    var valid = true;
    var min = moment($("#txtMin").val());//Tomo los rangos de  la fecha
    var max = moment($("#txtMax").val());//tomo rango de fehca

    switch(Range){
      case "R":
        if (!min.isValid()) { 
          min = null; 
        }

        if (!max.isValid()) { 
          max = null; 
        }

        if (min === null && max === null) {
          valid = true;
        }
        else {
          $.each(settings.aoColumns, function (i, col) {
            if (col.type == "text") {
              var cDate = moment(data[i]);
              if (cDate.isValid()) {
                if (max !== null && max.isBefore(cDate)) {
                  valid = false;
                }
                if (min !== null && cDate.isBefore(min)) {
                  valid = false;
                }
              }
              else {
                valid = false;
              }
            }
          });
        }
        break;
        case "S":
        if (!min.isValid()) { 
          min = null; 
        }

        if (!max.isValid()) { 
          max = null; 
        }

        if (min === null && max === null) {
          valid = true;
        }
        else {
          $.each(settings.aoColumns, function (i, col) {
            if (col.type == "date") {
              var cDate = moment(data[i]);
              if (cDate.isValid()) {
                if (max !== null && max.isBefore(cDate)) {
                  valid = false;
                }
                if (min !== null && cDate.isBefore(min)) {
                  valid = false;
                }
              }
              else {
                valid = false;
              }
            }
          });
        }
        break;
    }

    return valid;
  }
);

y de esta forma es como ejecuto o corro el filtro

 $("#updatefilter, #updatefilterDonw").on('click', function () {
      $('#genealogy').DataTable().draw();
    });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.