0

muy buenas, estoy usando el plugin de jquery https://datatables.net/extensions/select/examples/initialisation/checkbox.html

el cual le agregue un buscador de select option por columnas, los cuales se integran abajo del datatable, lo que quiero es que este se muestre arriba al lado del search que viene en el plugin, no se como posicionarlo de esta manera.

aqui el codigo del datatable:

$(document).ready(function (){
   var table = $('#example').DataTable({

      columnDefs: [
         {
            targets: 0,
            checkboxes: {
               selectRow: true
            }
         }
      ],
      select: {
         style: 'multi'
      },
      order: [[1, 'asc']]
   });

    table.column(4).every( function () {

    var column = this;
    var select = $('<select><option value="">Seleccione...</option></select>')
      .appendTo($(column.footer()).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d, j) {
      select.append('<option value="' + d + '">' + d + '</option>')
    });

la primera parte es de los checkboxes, la segunda desde el table. column es el buscador. agradeceria mucho la ayuda, saludos!

2
  • personalmente te recomendaría que no utilices esos filtrados que trae estándar datatables, sino que uses filtrados personalizados, son muy sencillos de hacerlos.
    – bypabloc_
    Commented el 2 mar. 2017 a las 14:27
  • me encantaria saber como hacerlo, algun documento estimado? de referencia no vendria mal... Commented el 2 mar. 2017 a las 14:33

2 respuestas 2

1

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.

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

7
  • A mi me parece la mejor opción usar los campos , filtros , botones que traen los plugins siempre que podamos ... pero me temo que muchas veces no son exactamente lo que necesitamos ya sea por funcionalidad o diseño. Pablo tu ejemplo me parece correcto + 1 :) Demaro Normalmente estos plugins contienen este tipo de funcionalidad con la que pasar por ajax ,mas variables . Lo que se tal y como ha explicado Pablo , es crear un formulario a parte que luego será consultado para el envió de esas variables. Commented el 2 mar. 2017 a las 15:35
  • @AngelFragaParodi la consulta por campos así como lo coloque en el ejemplo es mas efectivo por que lo estas consultando por sql, en cambio la opcion que ofrece el plugin es por regex y es por los string resultados de un sql. Gracias por el apoyo a la respuesta :D
    – bypabloc_
    Commented el 2 mar. 2017 a las 15:48
  • De nada Pablo :D , si es correcto y estoy de acuerdo ,pero , esto me recuerda a la inminente pregunta que se hace uno en estas situaciones. ¿Modo cliente o modo servidor? , es decir hace falta traer 10000.... registros cuando solo mostramos 25 por página ? todo depende del volumen de datos , disponibilidad del servidor y linea que se esté llevando en el proyecto. Al darle este ejemplo le obligas a usar modo servidor. Aunque está la parte del back , podrías actualizarlo y añadir que es modo servidor , para los menos puestos en este tema :) Commented el 2 mar. 2017 a las 16:08
  • ok, tienes razon no se especifica de que lado es el filtrado, pero realizara el filtrado a la cantidad de registros que se le indiquen en la vista del plugin (el select) y no consultara todos puesto que lo hace a partir del "limit" en el sql que le asigna el plugin.
    – bypabloc_
    Commented el 2 mar. 2017 a las 16:13
  • 1
    Eso es Pablo , gracias. Commented el 3 mar. 2017 a las 9:53
0

Llevo un rato buscándolo , pero como me temía o modificas el plugin o lo haces a mano.

Este plugin empaqueta la tabla en un div con id como el de la tabla , es decir, si tienes una tabla con id mitabla , creará un div con id : mitabla_wrapper . Lo mismo hace para los div que contienen los botones , y el campo de búsqueda.

Viendo por encima un poco la documentación, se puede definir el comportamiento de búsqueda pasando le una función, por ejemplo miBusqueda .

Todo esto nos puede permitir crear nosotros mismos el elemento select e incrustarlo en el div que queramos, por ejemplo mitabla_filter, que es donde se encuentra el campo de búsqueda .

Podemos aumentar el tamaño , mover a nuestro antojo etc , usando jquery o javascript nativo , ya eso a gusto de cada uno.

De esta forma nuestra función de búsqueda miBusqueda tendría en cuenta el valor seleccionado de nuestro elemento select mientras se ejecuta y además tendremos nuestro select posicionado donde queremos.

OJO!! tendrás que tener en cuenta los diferentes eventos que renderizan la tabla y construyen de nuevo la tabla , pero supongo que también hay alguna opción en la API para ello.

En definitiva , para lo que quieres hay que hacerlo a mano. Si tienes alguna pregunta no dudes en proponerla de nuevo.

ACTUALIZACIÓN

Le seguia dandole vueltas ,puedes hacerlo con CSS y javascript , de la siguiente forma sin añadir nada de elementos y mucho más simple.

$('#idDeMiTabla_filter').css('float','left');
$('#idDeMiTabla_filter').prev('div').css('float','right');
$('#idDeMiTabla_filter').prev('div').width(
   $('#idDeMiTabla_filter').parent('div').width() - 
   $('#idDeMiTabla_filter').width()
)

introducir la descripción de la imagen aquí

Lo que estamos haciendo es cambiar la posición entre los dos elementos que hay arriba y luego darle al primero el ancho que queda de restar el ancho del #idDeMiTabla_filter al padre de ambos. Esta opción es menos invasiva que la anterior.

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.