0

Necesito que alguien me pueda orientar con este problema. Tengo una tabla del cual programa turnos de personal, y necesito poder filtrar las columnas con datos extraídos desde MySQL, a modo de ejemplo sólo usaré datos representados en la tabla.

 

    $(document).ready(function(){

        $("#search").keyup(function(){

        _this = this;

        

            $.each($("#datos tbody tr"), function() {

            if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)

            $(this).hide();

            else

            $(this).show();

            });

        });

    });
#datos thead
{
  font-weight:bold;
  color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<input type="text" placeholder="Ingresa algún parámetro..." class="form-control-sm form-control" id="search" style="border-radius:0px;width:280px;">

<br>
<table id="datos" class="table-bordered table-sm">
   <thead>
      <tr>
         <th>Nombre</th>
         <th>Apellido</th>
         <th>01-NOV</th>
         <th>02-NOV</th>
         <th>03-NOV</th>
         <th>04-NOV</th>
         <th>05-NOV</th> 
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>Juan</td>
          <td>Riquelme</td>
          <td>T</td>
          <td>T</td>
          <td>T</td>
          <td>D</td>
          <td>D</td>
      </tr>
      <tr>
          <td>Roberto</td>
          <td>Andrade</td>
          <td>D</td>
          <td>D</td>
          <td>D</td>
          <td>T</td>
          <td>T</td>
      </tr>
      <tr>
          <td>Tomas</td>
          <td>Riquelme</td>
          <td>D</td>
          <td>D</td>
          <td>D</td>
          <td>T</td>
          <td>T</td>
      </tr>
   </tbody>

</table>

El tema de todoes que el filtro de búsqueda funciona bien, pero quisiera intentar filtrarlo por columnas, es decir, que existan inputs debajo del encabezado de la columna y pueda filtrar de acuerdo a lo que se escribe en aquella columna. Un ejemplo sería algo como esto.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
.search
{
  height:15px;
}
</style>


<br>
<table id="datos" class="table-bordered table-sm">
   <thead>
      <tr>
         <th>Nombre</th>
         <th>Apellido</th>
         <th>01-NOV <input type="text" class="search form-control-sm form-control" id="search" ></th>
         <th>02-NOV <input type="text" class="search form-control-sm form-control" id="search" ></th>
         <th>03-NOV <input type="text" class="search form-control-sm form-control" id="search" ></th>
         <th>04-NOV <input type="text" class="search form-control-sm form-control" id="search" ></th>
         <th>05-NOV <input type="text" class="search form-control-sm form-control" id="search" ></th> 
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>Juan</td>
          <td>Riquelme</td>
          <td>T</td>
          <td>T</td>
          <td>T</td>
          <td>D</td>
          <td>D</td>
      </tr>
      <tr>
          <td>Roberto</td>
          <td>Andrade</td>
          <td>D</td>
          <td>D</td>
          <td>D</td>
          <td>T</td>
          <td>T</td>
      </tr>
      <tr>
          <td>Tomas</td>
          <td>Riquelme</td>
          <td>D</td>
          <td>D</td>
          <td>D</td>
          <td>T</td>
          <td>T</td>
      </tr>
   </tbody>

</table>

¿Necesita alguna modificación el jquery que agregué arriba?, ¿Y que trabaje por clase y que sólo filtre los valores por columnas?.

Favor evitar sugerir el uso de datatables porque la tabla con la que trabajo es demasiado grande(variedad de columnas) y sólo estoy necesitando esto para realizar filtros, tampoco el uso de tablefilterfree.

2
  • La tabla muestra todo o está paginada en distintas páginas?
    – Jose
    Commented el 31 oct. 2019 a las 1:16
  • @matahombres, la tabla muestra todo, está en una pagina completa.
    – h6gignacio
    Commented el 31 oct. 2019 a las 1:17

1 respuesta 1

0

NOTA IMPORTANTE: Nunca pongas 2 atributos id con el mismo nombre

Explicación:
Como lo solucionaría yo sería añadir una clase a cada elemento del tr. Ej:

<tr>
    <td class="buscador_nombre"></td>
    <td class="buscador_apellidos"></td>
    <td class="buscador_date1"></td>
    <td class="buscador_date2"></td>
    <td class="buscador_date3"></td>
</tr>

Ya que estás utilizando JQuery y es mucho más flexible (y más fácil de utilizar) lo que haría seria añadir un atributo donde contenga el nombre y así me libro de código

<tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>01-NOV <input type="text" class="search form-control-sm form-control" busqueda="buscador_nombre"></th>
    <th>02-NOV <input type="text" class="search form-control-sm form-control" busqueda="buscador_apellidos"></th>
    <th>03-NOV <input type="text" class="search form-control-sm form-control" busqueda="buscador_date1"></th>
    <th>04-NOV <input type="text" class="search form-control-sm form-control" busqueda="buscador_date2"></th>
    <th>05-NOV <input type="text" class="search form-control-sm form-control" busqueda="buscador_date3"></th> 
</tr>

Código:
Básicamente JQuery hace selecciones como CSS (Que javascript sería document.querySelector), así que podemos utilizar más cómodamente clases

Los eventos que utilizaremos serán keyup y keydown. Utilizaremos keydown porque si mantienes se sigue poniendo la letra y keyup lo utilizaremos por si acaso llega a haber algún error con las teclas de borrado.
Para no tener que repetir código y que se quede más limpio posible haré una función y la llamaré con los dos eventos

$(".search").keyup(function(){
    rastreator($(this));
});
$(".search").keydown(function(){
    rastreator($(this));
});
function rastreator(elem){
    var rastrear="#datos tbody tr ."+elem.attr("busqueda");
    var contenido=elem.val();
    $(rastrear).each(function(){
        var texto=$(this).text();
        if(texto.startsWith(contenido)){
            $(this).parents("tr").show();
        }else{
            $(this).parents("tr").hide();
        }
    });
}

Luego utilizo el atributo de busqueda y le añado la "dirección" hacia donde voy ha buscar. Luego compruebo con startsWith() si comienza por ese contenido (Si lo que quieres hacer es que contenga en vez de que empiece, utiliza includes()). Si es así, lo muestro el tr. Si es lo contrario, oculto el tr

Ventajas de hacerlo así:
Si en un futuro añades más columnas a la tabla o es una tabla diferente o cosas así, simplemente tienes que añadir un atributo busqueda y añadirle una clase al td

Para hacerlo que pueda añadir más tablas solo tienes que cambiar estás dos líneas de código:
var rastrear="tbody tr ."+elem.attr("busqueda"); y $(this).parents("table").find(rastrear).each(....

1
  • gracias.. trabaja muy bien.
    – h6gignacio
    Commented el 31 oct. 2019 a las 1:57

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.