1

Tengo el siguiente Datatable, que estoy utilizando de prueba en mi App.

En las opciones que proporciona el API, tiene un campo para Buscar, ingresando texto, busca de forma dinamica en las columnas del Datatable. Mi duda radica en la siguiente:

¿Es posible, cambiar el tipo de campo de "Buscar" por una Lista de Selección? He encontrado en la documentación del API, que al final como "Footer" de cada columna, agrega listas de selección, lo cual no es lo que estoy buscando, sino cambiar el campo general, por una lista de selección.

Campo Buscar en Datatable

Adjunto mi porción de código.

$(document).ready(function() {
  $('#datatableTest').DataTable({
    fixedHeader: true,
    scrollX: true,
    searching: true,
    dom: 'Bfrtip',
    buttons: [],
    pageLength: 4,
    language: {
      search: 'Buscar',
      zeroRecords: 'No hay registros para mostrar.',
      emptyTable: 'La tabla está vacia.',
      info: "Mostrando _START_ de _END_ de _TOTAL_ Registros.",
      infoFiltered: "(Filtrados de _MAX_ Registros.)",
      paginate: {
        first: 'Primero',
        previous: 'Anterior',
        next: 'Siguiente',
        last: 'Último'
      }
    }
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>


<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="datatableTest" class="table table-striped table-bordered display nowrap" style="width:100%">
  <thead align="center">
    <tr>
      <td> <strong> Current Year </strong> </td>
      <td> <strong> Line </strong> </td>
      <td> <strong> Id </strong> </td>
    </tr>
  </thead>
  <tbody id="tableTBody" align="center">
    <tr>
      <td>2020</td>
      <td>HNG</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2019</td>
      <td>SHR</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2018</td>
      <td>GH1</td>
      <td>3</td>
    </tr>
    <tr>
      <td>2010</td>
      <td>PPL</td>
      <td>4</td>
    </tr>
    <tr>
      <td>2008</td>
      <td>LP1</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1991</td>
      <td>GGR</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

1 respuesta 1

1

DateTable como tal no permite cambiar el input search por un listado, pero tú puedes hacer un select que interactúe con el DateTable.

En el html, antes de table

<select id='search'>
    <option value='HNG'>HNG</option>
    <option value'SHR'>SHR</option>
    <option value='GH1'>GH1</option>
    ...
</select>

En el archivo javascript harías que cada vez que cambia el select, busque en el DateTable:

//Hay que asignar el DateTable a una variable
var table = $("#datatableTest").DataTable(...);
$("#search").change(function(){
    var texto = $("#search").val();
    //Buscamos en la tabla y la repintamos
    table.search(texto).draw();
});

Espero que te sirva. Un saludo.

1
  • Muchas gracias, así ya lo pude solucionar!
    – EliGal
    el 28 jul. 2020 a las 14:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.