0

Estoy desarrollando una aplicacion web en la que tengo una datable que se carga por ajax en el ready donde muestro el listado de pagos y quiero filtrar los resultados por un intervalo de fechas. He añadido el script que he encontrado en la web de datables para hacer el filtro por el campo que muestra la fecha (en mi caso la columna 2) y no me hace el filtro.

Estos son los input donde guardo las fechas.

<div class="card-body">
                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="">Ventas desde:</label>
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div>
                                    <input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="dd-mm-yyyy" id="ventas_desde">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="">Ventas hasta:</label>
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div>
                                    <input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="dd-mm-yyyy" id="ventas_hasta">
                                </div>
                            </div>
                        </div>
                       
                    </div>
                </div>

he añadido este código para el filtro de fechas pero no me hace nada

 $.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) {
    
        var min = $('#ventas_desde').val();
        var max = $('#ventas_hasta').val();

        var date = new Date(data[2]);

    if (
        ( min === null && max === null ) ||
        ( min === null && date <= max ) ||
        ( min <= date   && max === null ) ||
        ( min <= date   && date <= max )
    ) {
        return true;
    }
    return false;
}
 );


  $('#ventas_desde, #ventas_hasta').on('change', function () {
        table3.draw();
        
     });

No sé que estoy haciendo mal, porque funciona todas las funciones de la datable menos el filtrado por intervalo de fechas

2 respuestas 2

0

casi lo tengo solucionado, he añadido el siguiente codigo y me filtra, pero en la fecha min no me coge el valor desde la fecha que indico, es decir si indico el día 13 en la tabla muestra los valores superiores al día 13 y yo quiero que muestre los del día 13 y superiores

 var date1 = data[2] ;

 var date= stringToDate(date1,"dd-MM-yyyy","-");
0

el problema podría estar en que el filtro de fechas se está ejecutando antes de que la tabla de datos esté completamente cargada. Para asegurarte de que el filtro se aplica después de que se haya cargado completamente la tabla de datos, debes utilizar el evento initComplete de DataTables.

Para hacerlo, debes modificar el código que agregaste para el filtro de fechas de la siguiente manera, intenta con esto:

$(document).ready(function() {
  var table = $('#mi_tabla').DataTable( {
    "initComplete": function () {
      $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        var min = $('#ventas_desde').val();
        var max = $('#ventas_hasta').val();

        var date = new Date(data[2]);

        if ((min === null && max === null) ||
            (min === null && date <= max) ||
            (min <= date && max === null) ||
            (min <= date && date <= max)) {
          return true;
        }
        return false;
      });
    }
  });

 

 $('#ventas_desde, #ventas_hasta').on('change', function() {
        table.draw();
      });
    });

El código anterior agrega el filtro de fechas dentro del evento initComplete, que se ejecuta después de que se ha inicializado la tabla de datos. Esto garantiza que el filtro se aplicará correctamente después de que se haya cargado completamente la tabla.

Espero que esto solucione el problema que estás teniendo con el filtrado de fechas en la tabla de datos, un saludo.

Edito

Lo que puse arriva seria respuesta a la pregunta, ahora, respondiendo a tu comentario:

Actualmente, estás utilizando una función que compara las fechas de forma directa. Para asegurarte de que los datos incluyan la fecha mínima que has seleccionado, debes comparar la fecha de la fila con la fecha mínima seleccionada y con la fecha siguiente a esa fecha.

Para hacer esto, puedes convertir la fecha mínima seleccionada a un objeto Date, sumarle un día y luego comparar las fechas de la fila con esa fecha. Esto asegurará que los datos incluyan la fecha mínima seleccionada.

Aquí te dejo el código modificado que deberías usar en el filtro:

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
  var min = $('#ventas_desde').val();
  var max = $('#ventas_hasta').val();

  var date = stringToDate(data[2], "dd-MM-yyyy", "-");

  if ((min === null && max === null) ||
      (min === null && date <= stringToDate(max, "dd-MM-yyyy", "-")) ||
      (stringToDate(min, "dd-MM-yyyy", "-") <= date && max === null) ||
      (stringToDate(min, "dd-MM-yyyy", "-") <= date && date <= stringToDate(max, "dd-MM-yyyy", "-").setDate(stringToDate(max, "dd-MM-yyyy", "-").getDate() + 1))) {
    return true;
  }
  return false;
});

$('#ventas_desde, #ventas_hasta').on('change', function() {
  table3.draw();
});

function stringToDate(dateStr, format, delimiter) {
  var formatLowerCase = format.toLowerCase();
  var formatItems = formatLowerCase.split(delimiter);
  var dateItems = dateStr.split(delimiter);
  var monthIndex = formatItems.indexOf("mm");
  var dayIndex = formatItems.indexOf("dd");
  var yearIndex = formatItems.indexOf("yyyy");
  var month = parseInt(dateItems[monthIndex]);
  month -= 1;
  var formatedDate = new Date(dateItems[yearIndex], month, dateItems[dayIndex]);
  return formatedDate;
}

Tu Respuesta

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

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