Skip to main content
2 de 2
se añadieron 59 caracteres en el cuerpo
Ivan More Flores
  • 1.6k
  • 4
  • 20
  • 45

Actualmente trabajo con CI y hago lo mismo que tu en mi caso no necesito el boton buscar, TRABAJO CON algunos atributos en mi vista comodata-column y eso te ayudara mas eso hago en mi vista y aparte solo declaro la tabla, en JQuery utilizo .search-input-text eso me ayuda con la busqueda, en mi controlador armo array y ya con eso lleno la tabla por otro lado en el modelo hago una busqueda por columns te dejo cada parte del CI espero te ayude :

introducir la descripción de la imagen aquí

NO OLVIDES COLOCAR ESTO EN LA PARTE INFERIOR DE TU VISTA

<script type="text/javascript">
                                        var baseurl = "<?php echo base_url(); ?>";
                                        var ciCsrfToken = "<?php echo $this->security->get_csrf_hash(); ?>";
    </script>

VISTA :

<!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <section class="content-header">
                    <h1>
                        Listado de Ventas
                    </h1>
                </section>
                <!-- Main content -->
                <section class="content">
                    <div class="box box-solid box-primary">
                        <div class="box-header with-border">
                            <h6 class="box-title"><i class="fa fa-calendar-check-o"></i> BUSQUEDA </h6>
                        </div>
                        <div class="box-body">
                            <div class="box-body">
                            </div>
                            <div class="form-horizontal">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-horizontal">                                        
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="control-label col-md-4">FECHA INICIO</label>
                                                        <div class="col-md-6">
                                                            <input data-column="1" id="bfecha_inicio" value=""
                                                                   class="form-control datepicker search-input-text" readonly
                                                                   type="text"> <span class="help-block"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="control-label col-md-4">FECHA FINAL</label>
                                                        <div class="col-md-6">
                                                            <input data-column="2" id="bfecha_final" value=""
                                                                   class="form-control datepicker search-input-text" readonly
                                                                   type="text"> <span class="help-block"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="control-label col-md-4">CLIENTE</label>
                                                        <div class="col-md-6">
                                                            <input data-column="3" id="cliente" value=""
                                                                   class="search-input-text form-control" style="width: 100%">
                                                        </div>
                                                    </div>
                                                </div>                                        
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <br>
                        <div class="col-xs-12">
                            <div class="box box-solid box-primary">
                                <div class="box-header">
                                    <h3 class="box-title">
                                        <i class="fa fa-check-circle"></i> LISTADO DE VENTAS
                                    </h3>

                                </div>
                                <br>

                                <hr>
                                <!-- /.box-header -->
                                <div class="box-body">                        
                                    <table id="tabla_ventas"
                                           class="table table-bordered table-condensed table-hover responsive"
                                           cellspacing="0" width="100%">
                                        <thead class="background-thead">
                                            <tr>
                                                <th>Nº</th>
                                                <th>CLIENTE</th>
                                                <th>TOTAL</th>
                                                <th style="width: 200px;">FEHA</th>
                                                <th>DETALLE</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

<!-- end snippet -->

EN MI JQUERY

    var comprobante;

$(document).ready(function () {

    $(function () {

        tabla_ventas = $('#tabla_ventas').DataTable({
            "processing": true,
            "serverSide": true,
            "order": [],

            "ajax": {
                "url": baseurl + 'Caja/listar_ventas',
                "type": "POST",
                "data": {"ci_csrf_token": ciCsrfToken}
            },

            "columnDefs": [
                {
                    "targets": [-1, 0, 1, 2, 3],
                    "orderable": false
                }
            ],
            "language": {
                "processing": "Procesando...",
                "lengthMenu": "Mostrar _MENU_ registros",
                "zeroRecords": "No se encontraron resultados",
                "emptyTable": "Ningún dato disponible en esta tabla",
                "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                "infoPostFix": "",
                "search": "Buscar:",
                "url": "",
                "infoThousands": ",",
                "loadingRecords": "Cargando...",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
                "aria": {
                    "sortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            "lengthMenu": [[10, 15, 20, 25], [10, 15, 20, 25]],
            "iDisplayLength": 10,
        });



        $('.datepicker').datepicker({
            autoclose: true,
            format: "yyyy-mm-dd",
            todayHighlight: true,
            orientation: "top auto",
            todayBtn: true,
            todayHighlight: true,
            language: "es"
        });


        $('.search-input-text').on('keyup click', function () {
            var i = $(this).attr('data-column');
            var v = $(this).val();
            tabla_ventas.columns(i).search(v).draw();
        });


        $('.search-input-select').on('change', function () {
            var i = $(this).attr('data-column');
            var v = $(this).val();
            tabla_ventas.columns(i).search(v).draw();
        });

        $('#bfecha_inicio').on('change', function () {   // for select box
            var i = $(this).attr('data-column');
            var v = $(this).val();
            tabla_ventas.columns(i).search(v).draw();
        });

        $('#bfecha_final').on('change', function () {   // for select box
            var i = $(this).attr('data-column');
            var v = $(this).val();
            tabla_ventas.columns(i).search(v).draw();
        });
    });
});

EN MI CONTROLADOR

public function listar_ventas() {
        $pagos = $this->caja->obtener_data_pagos();
        $data = array();
        $no = $_POST ['start'];
        foreach ($pagos as $pago) {
            $no ++;
            $row = array();
            $row [] = '<div class="text-left">' . 'VEN000' . $pago->id_venta . '</div>';
            $row [] = $pago->nombres_completos;
            $row [] = $pago->total;
            $row [] = $pago->fecha_venta;
            $row [] = '<div onclick="detalle_venta(' . $pago->id_venta . ')" class="text-center details-control"><a><i class="fa fa-plus-circle fa-2x"></i></a></div>';
            $data [] = $row;
        }
        $output = array(
            "draw" => $_POST ['draw'],
            "recordsTotal" => $this->caja->contador_total_pagos(),
            "recordsFiltered" => $this->caja->contador_filtrado_pagos(),
            "data" => $data
        );
        echo json_encode($output);
    }

EN MODELO "COMO OBSERVACION 'v_ventas' es la vista creada en mysql"

var $t_view_pagos = 'v_ventas';
    var $query_pagos = null;

    private function _obtener_data_query_pagos() {

        $sql = "SELECT * FROM " . $this->t_view_pagos;
        $sql .= " WHERE 1 = 1 ";

        if (!empty($_POST ['columns'] [1] ['search'] ['value'])) { // Fecha inicial
            $sql .= " AND fecha_venta >= '" . date_format(date_create($_POST ['columns'] [1] ['search'] ['value']), "Y-m-d") . "' ";
        }

        if (!empty($_POST ['columns'] [2] ['search'] ['value'])) { // Fecha final
            $sql .= " AND fecha_venta <= '" . date_format(date_create($_POST ['columns'] [2] ['search'] ['value']), "Y-m-d") . "' ";
        }

        if (!empty($_POST ['columns'] [3] ['search'] ['value'])) { // Cliente
            $sql .= " AND nombres_completos like '" . $_POST ['columns'] [3] ['search'] ['value'] . "%' ";
        }

        $this->query_pagos = $sql;
        if ($_POST ['length'] != - 1)
            $sql .= "LIMIT " . $_POST ['start'] . ", " . $_POST ['length'];
        return $sql;
    }

    function obtener_data_pagos() {
        $sql = $this->_obtener_data_query_pagos();
        $query = $this->db_caja->query($sql);
        return $query->result();
    }

    function contador_filtrado_pagos() {
        $query = $this->db_caja->query($this->query_pagos);
        return $query->num_rows();
    }

    public function contador_total_pagos() {
        $this->db_caja->from($this->t_view_pagos);
        return $this->db_caja->count_all_results();
    }
Ivan More Flores
  • 1.6k
  • 4
  • 20
  • 45