1

He intentado por mucho hacer un buscador de rango de fechas en codeigniter por medio de ajax y datatables, pero simplemente no lo he conseguido :(, el siguiente código que he logrado hacer es para que me muestre todos los datos de la base de datos, pero al querer realizar el buscador simplemente no lo consigo, ayuda por favor.

Esta es mi tabla de momento la cual muestra todos los datos sin la el proceso de selección de fechas.

Tabla con la información de la base de datos

Este código es la inicializacion del datatable el cual muestra la informacion por ajax de TODOS los datos de la base de datos y aplico el selector de fechas de daterangepicker para los inputs, los cuales estan vacíos antes de seleccionar la fecha de inicio y fin

/* VER ORDENES DE TRABAJO SERVICIO TECNICO */
$(document).ready(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        $('#tablaReportePloteo').DataTable().responsive.recalc();
        $('#tablaReporteServicioTecnico').DataTable().responsive.recalc();
    })
    $('#tablaReporteServicioTecnico').DataTable({
        ajax: 'http://localhost/ci3/reportes/mostrarServicioTecnico',
        dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
        order: [],
        responsive: true,
        autoWidth: false,
        processing: true,
        language: {
            "sProcessing": "Procesando...",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            },
            // Select2 for length menu styling
            
            // Initialize
            
            search: '<span>Filtro:</span> _INPUT_',
            searchPlaceholder: 'Escriba para buscar...',
            lengthMenu: '<span>Mostrar:</span> _MENU_',
            paginate: {
                'first': 'First',
                'last': 'Last',
                'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
            }
        },
        buttons: {
            dom: {
                button: {
                    className: 'btn btn-light'
                }
            },
            buttons: [
                {
                    extend: 'copy',
                    text: 'Copiar'
                },
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                    }
                },
                {
                    extend: 'pdf',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                    }
                },
                {
                    extend: 'print', text: 'Imprimir',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                    }
                }
            ]
        }
    })
    $('.dataTables_length select').select2({
        minimumResultsForSearch: Infinity,
        dropdownAutoWidth: true,
        width: 'auto'
    });
});
$('#fechaInicio').daterangepicker({
    singleDatePicker: true,
    locale: {
        format: 'DD/MM/YYYY'
    }
});
$('#fechaInicio').val('')
$('#fechaFin').daterangepicker({
    singleDatePicker: true,
    locale: {
        format: 'DD/MM/YYYY'
    }
});
$('#fechaFin').val('')

Este es el controlador en el cual obtengo todos los datos de la base de datos para posterior "dibujar" el datatable que recibe el ajax del codigo de arriba

/* MOSTRAR ORDENES DE TRABAJO */
        public function mostrarServicioTecnico() {
            
            $resultadoList = $this->reportes_model->mostrarServicioTecnico();
            $resultado = array();
            $i = 1;
            
            if (!empty($resultadoList)) {
                
                foreach ($resultadoList as $key => $value) {
                    
                    $fecha = $value['Fecha_OTServicioTecnico'];
                    setlocale(LC_ALL, 'spanish');
                    $fechaNueva = strftime("%d de %B de %Y a las %H:%M:%S", strtotime($fecha));
                    
                    $nombreApellido = $value['Nombre_Cliente'] . ' ' . $value['Apellido_Cliente'];
                    if ($value['Estado_OTServicioTecnico'] == '1') {
                        $estado = '<span class="badge badge-primary">Vigente</span>';
                    } else {
                        $estado = '<span class="badge badge-danger">Anulada</span>';
                    }
                    
                    /* CREACION DEL SELECTOR DENTRO DE LA TABLA PARA CAMBIAR SU ESTADO POSTERIORMENTE */
                    $estadoDocumento = $estado;
                    $acciones = '<div class="list-icons"><a href="#" id="verReporteOtServicioTecnico" value="' .
                        $value['ID_OTServicioTecnico'] . '" class="btn btn-primary btn-icon" type="button"><i class="icon-info22"></i></a>';
                    $total = '$' . $value['Total_OTServicioTecnico'];
                    $resultado['data'][] = array(
                        
                        $i++,
                        $nombreApellido,
                        $value['Nombre_Documento'],
                        $estado,
                        $value['NumeroDocumento_OTServicioTecnico'],
                        $value['Descripcion_OTServicioTecnico'],
                        $fechaNueva,
                        $total,
                        $acciones
                    
                    );
                }
                
            } else {
                $resultado['data'] = array();
            }
            
            echo json_encode($resultado);
            
        }

Por último pero no menos importante, tengo las consultas a la base de datos, son 2, la primera es para seleccionar todos los datos de la base de datos, y la segunda la cree con la intencion de darle uso por medio del controlador que no consigo la forma de hacerla funcionar, el único funcional es el primero

/* MOSTRAR ORDEN DE TRABAJO SERVICIO TECNICO */
        public function mostrarServicioTecnico() {
            $this->db->select('*');
            $this->db->from('ot_servicio_tecnico');
            $this->db->join('cliente', 'cliente.ID_Cliente = ot_servicio_tecnico.ID_Cliente');
            $this->db->join('tipo_documento', 'tipo_documento.ID_Documento = ot_servicio_tecnico.ID_Documento');
            $this->db->order_by('ID_OTServicioTecnico', 'ASC');
            $query = $this->db->get();
            return $query->result_array();
        }
public function mostrarFechaServicioTecnico($fechaInicio, $fechaFin) {
            
            $this->db->select('*');
            $this->db->from('ot_servicio_tecnico');
            $this->db->join('cliente', 'cliente.ID_Cliente = ot_servicio_tecnico.ID_Cliente');
            $this->db->join('tipo_documento', 'tipo_documento.ID_Documento = ot_servicio_tecnico.ID_Documento');
            $this->db->where("DATE_FORMAT(Fecha_OTServicioTecnico,'%Y-%m-%d') >='$fechaInicio'");
            $this->db->where("DATE_FORMAT(Fecha_OTServicioTecnico,'%Y-%m-%d') <='$fechaFin'");
            $this->db->order_by('ID_OTServicioTecnico', 'ASC');
            $query = $this->db->get();
            return $query->result_array();
        
        }
4
  • Puedes ver un ejemplo en SO en inglés, no parece complicado.
    – Triby
    Commented el 28 oct. 2020 a las 23:08
  • @Triby lo que pasa es que mi tabla se dibuja desde el controlador y lo muestro en el datatable directamente, vi el ejemplo pero no me ubico muy bien donde puedo hacer dicho proceso por lo que te comento que mi tabla se dibuja en el controlador y lo muestra en el ajax del datatable :(, será que tienes algo de tiempor para que me puedas ayudar por favor. Commented el 28 oct. 2020 a las 23:16
  • No acabo de entenderlo del todo, pero déjame ver qué puedo hacer.
    – Triby
    Commented el 28 oct. 2020 a las 23:19
  • @Triby muchas gracias compa Commented el 29 oct. 2020 a las 0:59

1 respuesta 1

1

Hay un par de problemas importantes para aplicar el filtro por fecha:

  1. Se debe usar un formato por defecto y que pueda ser analizado, no sirve el formato local del tipo 29 de octubre de 2020. Tal vez se pueda usar algún método como encerrar la fecha en un span y agregando atributos de datos del tipo <span data-fecha="2020-10-29">29 de octubre de 2020</span>, pero escapa de mi alcance.

  2. La función de filtro externo va a aplicar a todas las tablas que tengas en la misma página, por lo que deberías buscar la forma de identificar cuál se está ejecutando para saber si filtrar o no. No encontré documentación para extraer ID desde settings, pero tal vez puedas analizar cuál está visible.

// Solo para crear los select
// IMPORTANTE: No se usa ID, sino CLASS
let selectData = '<select class="estadoDocumento" name="estadoDocumento"><option disabled selected>Seleccione un documento</option><option value="1">Vigente</option><option value="2">Anulada</option></select>';
// Datos de ejemplo para cargar la tabla
let resultData = [
    [1, 'Andrea Rodríguez', 'Factura', selectData, '000154', '2020-05-15 08:30:15'],
    [2, 'David Alejandro Paucar Briones', 'Recibo', selectData, '00037', '2020-05-17 09:23:07'],
    [3, 'Roxana María Pérez', 'Factura', selectData, '000155', '2020-05-20 14:52:32']
];

$(document).ready(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        $('#tablaReportePloteo').DataTable().responsive.recalc();
        $('#tablaReporteServicioTecnico').DataTable().responsive.recalc();
    })
    // Asignar DataTable a una variable para poder interactuar
    let tablaServicio = $('#tablaReporteServicioTecnico').DataTable({
        // Para este ejemplo no se carga por AJAX
        // ajax: 'http://localhost/ci3/reportes/mostrarServicioTecnico',
        // Se usan los datos definidos previamente
        data: resultData,
        dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
        order: [],
        responsive: true,
        autoWidth: false,
        processing: true,
        language: {
            "sProcessing": "Procesando...",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            },
            // Select2 for length menu styling
            
            // Initialize
            
            search: '<span>Filtro:</span> _INPUT_',
            searchPlaceholder: 'Escriba para buscar...',
            lengthMenu: '<span>Mostrar:</span> _MENU_',
            paginate: {
                'first': 'First',
                'last': 'Last',
                'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
            }
        },
        buttons: {
            dom: {
                button: {
                    className: 'btn btn-light'
                }
            },
            buttons: [
                {
                    extend: 'copy',
                    text: 'Copiar'
                },
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
                {
                    extend: 'pdf',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
                {
                    extend: 'print', text: 'Imprimir',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                }
            ]
        },
        // Ejecuar cuando se carguen todos los datos en la tabla
        // No puede ser función flecha, porque "this" no estaría disponible
        drawCallback: function(settings) {
            if(this.api().data().toArray().length > 0) {
                // Obtener fecha mínima y máxima para los input
                let fechas = [];
                this.api().data().toArray().forEach(data => {
                    // La fecha está en la sexta columna (índice 5)
                    // Se separa fecha y hora para tomar solo la fecha
                    fechas.push(data[5].split(' ')[0]);
                });
                fechas.sort();
                let fechaMin = fechas[0];
                let fechaMax = fechas.pop();
                // Asignar valor y límites
                $('#fechaInicio').val(fechaMin);
                $('#fechaInicio').attr('min', fechaMin);
                $('#fechaInicio').attr('max', fechaMax);
                $('#fechaFin').val(fechaMax);
                $('#fechaFin').attr('min', fechaMin);
                $('#fechaFin').attr('max', fechaMax);
            }
            // Aplicar select2 con las opciones deseadas
            $('.estadoDocumento').select2({
                placeholder: 'Seleccione un documento',
                minimumResultsForSearch: Infinity,
            });
        }
    });
    // Activar campos de fecha por clase
    $('.dt-fecha').on('change', e => tablaServicio.draw());
});
// Activar filtro externo
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
    let fechaIni = $('#fechaInicio').val();
    let fechaFin = $('#fechaFin').val();
    // La fecha está en la sexta columna (índice 5)
    let fechaDoc = data[5].trim();
    if (!fechaIni || !fechaFin) {
        return true;
    }
    console.log(fechaIni, fechaFin, fechaDoc, data[5]);
    return (fechaDoc >= fechaIni && fechaDoc <= fechaFin)
});
.fechas { text-align:center; }
<link href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<div class="fechas">
  <input type="date" id="fechaInicio" class="dt-fecha">
  <input type="date" id="fechaFin" class="dt-fecha">
</div>
<table id="tablaReporteServicioTecnico">
<thead>
  <tr>
      <th>#</th>
      <th>Cliente</th>
      <th>Tipo Documento</th>
      <th>Estado Documento</th>
      <th>Número de documento</th>
      <th>Fecha</th>
  </tr>
</thead>
<tbody>
</tbody>
</table>

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.