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
.