0

Amigos estoy tratando de agregar un buscador individual a ciertas columnas de mi tabla, para esto uso DataTables.js, el cual me funciona bien y todo, pero la cuestión es que se tiene que implementar en tres columnas en especifico dos buscadores de tipo select list y otro input, el problema es que no e logrado hacer esto, ya que solo e podido hacer que si se agrega el select list sea para todas las columnas y asi es igual para los input, y solo e posido agregar un tipo y no lo dos al tiempo, coo ven en la imagen, las columnas que estan en rojo son las que no deben de tener un buscador, y las que estan en verde son las que lo deben de implementar, alguien me podría ayudar a implementar esto.

De esta forma es que estoy haciendo la implementacion de los buscadores.

$(document).ready(function () {
    $('#alerta thead th').each(function () {
        var title = $(this).text();
        $(this).html(title + ' <input type="text"/>');
    });

    var table = $('#alerta').DataTable();

    table.columns().every(function () {
        var table = this;
        $('input', this.header()).on('keyup change', function () {
            if (table.search() !== this.value) {
                table.search(this.value).draw();
            }
        });
    });
});

La idea es que en el cuadro verde esten 3 buscadores dos select list y uno input, le agradeceria la ayuda brindada.

introducir la descripción de la imagen aquí

1

2 respuestas 2

2

Jhonny por experiencia te sugiero que la parte de filtros no la hagas sobre el plugin de datatables si no por separado es decir crea un formulario de campos de filtro y haz peticiones ajax, cada que hagas una busquda refresacas tu datatable:

<form class="historyFilters">
  <div class="filters">

    <div class="col-sm-12 col-md-2">
      <label for="">Sitio:</label>
      <select class="sites form-control" name="sites">
        <option value="">-- Selecciona -- </option>
      </select>
    </div>
    <div class="col-sm-12 col-md-3">
      <label for="">Fecha</label>
      <input type="text" name="date" class="datepicker form-control" value="">
    </div>
    <div class="col-sm-12 col-md-3">
      <a href="javascript:void(0);" class="btnBuscar btn btn-primary"> <i class="fa fa-search" aria-hidden="true"></i> Buscar </a>
      <a href="javascript:void(0);" class="btnlimpiar btn btn-danger"> <i class="fa fa-trash-o" aria-hidden="true"></i> Limpiar </a>
    </div>
    <div class="row"></div>
  </div>
</form>

Despues tienes que poner tu tbl con la qu usaras el plugin de datatables:

<div class="tblWrap">
  <table class="table-striped tblHis">
    <thead>
      <tr>
        <th>Id</th>
        <th>Nombre</th>
        <th>Fecha</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>

y por ultimo crear los js para hacer las peticiones y refrescar el plugin datatables:

<script>
  function cargaGrid(){
      // capturo los datos del formulario de filtros
      fecha = $('.datepicker').val();
      site = $('.sites').val();
      // armado de la cadena de peticion que se envia por post en ajax
      cad = '_token='+token+'&fecha='+fecha+'&site='+site;
      // variable donde almacenara el html de la tabla
      tbl = '';
      // si el datatable ya esta instanciado sobre la tabla
      // se detruye para que al recibir el nuevo contenido se rearme
      $('.tblHis').dataTable().fnDestroy();
      //vaciado de la tabla antes de insertar los nuevos resultados
      $('.tblHis tbody').empty();
      // peticion ajax
      $.ajax({
          type: "POST",
          url: "TU_POST_URL",
          data: cad,
          success:function(data) {
              console.info(data);
              $.each(data.data,function(i,d){
                tbl += '<tr>';
                tbl += '<td>'+d.tRenderHistorialId+'</td>';
                tbl += '<td>'+d.tRenderHistorialNombre+'</td>';
                tbl += '<td>'+d.tRenderHistorialFecha+'</td>';;
                tbl += '<td>';
                tbl += '<a href="" class="btn btn-primary btn-xs" target="_blank"><i class="fa fa-download" aria-hidden="true"></i></a>';
                tbl += '<a href="javascript:void(0);" class="btn btn-default btn-xs uploadFtp"><i class="fa fa-cloud-upload" aria-hidden="true"></i></a>';
                tbl += '<a href="javascript:void(0);" class="btn btn-default btn-xs uploadFtp"><i class="fa fa-cloud-upload" aria-hidden="true"></i></a>';
                tbl += '</td>';
                tbl += '</tr>';
              });
              // agragamos los resultados al tbl:
              $('.tblHis tbody').append(tbl);
              // configuracion de datatable:
              $('.tblHis').dataTable({
                  // ordenamiento por defecto de la segunda col.
                  "order": [[ 2, "desc" ]],
              });
          }
      });
  }

  // accion para cuando se presiona el boton de busqueda del formulario:
  $(document).on('click','.btnBuscar',function(){
    cargaGrid();
  });
</script>

Saludos y espero que mi respuesta sirva para referencia tuya.

0

Cuando defines tus buscadores, toma los indices de las columnas; omite solo las que no necesitas.

table.columns().every(function () {
var table = this;
    if(table.index() > 0 && table.index() < 4){
        $('input', this.header()).on('keyup change', function () {
            if (table.search() !== this.value) {
                table.search(this.value).draw();
            }
    }
 });
});

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.