Skip to main content
se añadieron 430 caracteres en el cuerpo
Origen Enlace
bypabloc_
  • 1.9k
  • 15
  • 46
  • 102

Actualización 1

Como dice en los comentario el user @AngelFragaParodi no especifique de que lado es el filtrado, pues es del lado del servidor, y el ejemplo que doy esta hecho con laravel. Con un poco de conocimientos se puede migrar a otro framework tranquilamente, unas que otras búsquedas en google lo solucionan, solo es cuestión de indagar un poquito mas. Pero la esencia del filtrado personalizado ya la plasme :D

Actualización 1

Como dice en los comentario el user @AngelFragaParodi no especifique de que lado es el filtrado, pues es del lado del servidor, y el ejemplo que doy esta hecho con laravel. Con un poco de conocimientos se puede migrar a otro framework tranquilamente, unas que otras búsquedas en google lo solucionan, solo es cuestión de indagar un poquito mas. Pero la esencia del filtrado personalizado ya la plasme :D

Origen Enlace
bypabloc_
  • 1.9k
  • 15
  • 46
  • 102

Yo prefiero trabajar los filtrados personalizados como los ofrece el plugin datatables, es muy sencillo. Acá un ejemplo práctico:

Html del filtrado:

<div class="form-group">
    <label for="filter_campo" class="control-label col-md-2">Nombre: </label>
    <div class="col-md-10"> 
        <input type="text" class="form-control" id="filter_campo" name="filter_campo">
    </div>
</div>
<br/><br/>
<div class="form-group">
    <label for="estados" class="control-label col-md-2">Estado: </label>
    <div class="col-md-10"> 
        <select id='estados' name='estados' class='form-control'>
            <option value="" disabled="disabled" selected="true">Elija...</option>
            <option value="true">Activos</option>
            <option value="false">Inactivos</option>
            <option value="">Todos</option>
        </select>
    </div>
</div>

Html de la tabla:

<table class="display" id="table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Nº</th>
            <th>Procesos Productivos</th>
            <th>Nombre</th>
            <th>Estado</th>
            <th>Acción</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Nº</th>
            <th>Procesos Productivos</th>
            <th>Nombre</th>
            <th>Estado</th>
            <th>Acción</th>
        </tr>
    </tfoot>
</table>

Ajax donde formo mi datatables en la vista:

var table = $('#table').DataTable({
    "filter": false,
    "destroy": true,
    "responsive": true,
    "processing": true,
    "serverSide": true,
    "ajax": {
        url: 'tabla/procesos',
        global: false,
        method: 'POST',
        data: function (d) {
            d.campo = $('input[name=filter_campo]').val();//aca obtengo el valor del campo "filter_campo"
            d.status = $('select[name=estados]').val();//aca obtengo el valor del select "estados"

        }
    },
    "columns": [
        {data: 0, searchable: false, orderable: false, render: function( data, type, full, meta ){
                return meta.row+1;
            }
        },
        {data: 1},
        {data: 2},
        {"render": function ( data, type, row ) {
            return ButtonEstado(row[3]);
        }},
        {"render": function () {
            return ButtonEditar() + ' ' + ButtonEliminar();
        }},
    ],
    "fnDrawCallback": function() {
        StyleCheckbox();
    },
    order: [[1, 'asc']],    
    "language": {
        "url": "js/idioma_espaniol_datatables.js"
    },
    initComplete: function (data) {

        $('#filter_campo').keyup(function(e) { //cada vez que suelta una tecla
            table.draw(); //refresca la tabla
            e.preventDefault();
        });

        $('#estados').on( 'change', function (e) {//cada vez que cambia de valor el select
            table.draw(); //refresca la tabla
            e.preventDefault();
        });
    }
});

Controlador:

$sql = Procesos::select(array
                    (
                        'procesos.id', 
                        'ldp.nombre as ldp', 
                        'procesos.nombre', 
                        'procesos.status', 

                        'procesos.id_lineas_de_produccion'
                    )
                )
               ->join('lineas_de_produccion as ldp','procesos.id_lineas_de_produccion','=','ldp.id');
return Datatables::of($sql)
->filter(function ($query) use ($request) {
    if ($request->has('campo')) { //aca verifico que el campo exista
        $query->where('nombre', 'ilike', "%{$request->get('campo')}%"); //y aca realizo la busqueda por ilike a través del valor del campo de la vista
    }
    if ($request->has('status')) {  //aca verifico que el campo exista
        $query->where('status', '=', "{$request->get('status')}"); //aca realizo filtro la consulta por el where cuando sea status
    }
//estos filtrados los puedes usar a tu creatividad, yo tengo algunos muchos mas complejos. Todo depende de ti.
})
->make();

La fuente donde aprendi a hacerlo es este enlace.