How to set individual search engine in table column with datatable

Question

How to set individual search engine in table column with datatable

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Friends I am trying to add an individual search engine to certain columns of my table, for this I use DataTables.js, which works well for me and everything, but the point is that it has to be implemented in three columns in specific two search engines. type select list and other input, the problem is that I have not managed to do this, since I could only do that if the select list is added to all the columns and so it is the same for the input, and I just want to add a type and not the two at the time, coo see in the image, the columns that are in red are those that should not have a search engine, and those that are in green are the ones that should implement it, someone could help me implement this .

This is how I'm doing the search engine implementation.

$(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();
            }
        });
    });
});

The idea is that in the green box there are 3 searchers, two select list and one input, I would appreciate the help provided.

javascript jquery datatables

asked by Jhonny Luis 12.12.2018 в 20:34

source

2 answers

0

When you define your search engines, take the indexes of the columns; omit only the ones you do not need.

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();
            }
    }
 });
});

answered by 12.12.2018 в 20:44

two selections in a row Redirect from HTTP to HTTPS with htaccess

score 2 · Accepted Answer

Jhonny from experience I suggest that the filters part do not do it on the datatables plugin if not separately that is to say create a form of filter fields and make ajax requests, every time you do a search you refresh your 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>

Then you have to put your tbl with which you will use the datatables plugin:

<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>

and finally create the js to make the requests and refresh the datatables plugin:

<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>

Greetings and I hope that my answer is for your reference.