Boa noite. Estou tendo alguns problemas para fazer outra função funcionar junto com o jQuery. A função jQuery está funcionando como eu gostaria, porém, a que criei não.
Na verdade ela está quase funcionando por completo, essa função seleciona todos os nomes da tabela e faz um filtro trazendo só o nome selecionado no combo box e dando hide nos demais. Ela funciona, porém, só na página da tabela que estou, se eu seleciono algum nome que está na segunda página (Ex: Diego), ele não vem para a primeira página como deveria dando hide nos demais. Mas os nomes que estão na segunda página da table o combo box faz a leitura.
Alguém poderia me ajudar e ter alguma dica de o que estou errando no código?
P.s: A combo box está sem css e posicionamento, mas é a que se encontra em baixo da coluna "Nome".
//Iniciar função jQuery de filtros padrões
$(document).ready(function() {
$('#tab').dataTable({ordering:false});
});
//End
//Inicia função do combobox
function AdicionarFiltro(tabela, coluna) {
var cols = $("#" + tabela + " thead tr:first-child th").length;
if ($("#" + tabela + " thead tr").length == 1) {
var linhaFiltro = "<tr>";
for (var i = 0; i < cols; i++) {
linhaFiltro += "<th></th>";
}
linhaFiltro += "</tr>";
$("#" + tabela + " thead").append(linhaFiltro);
}
var colFiltrar = $("#" + tabela + " thead tr:nth-child(2) th:nth-child(" + coluna + ")");
$(colFiltrar).html("<select id='filtroColuna_" + coluna.toString() + "' class='filtroColuna'> </select>");
var valores = new Array();
$("#" + tabela + " tbody tr").each(function() {
var txt = $(this).children("td:nth-child(" + coluna + ")").text();
if (valores.indexOf(txt) < 0) {
valores.push(txt);
}
});
$("#filtroColuna_" + coluna.toString()).append("<option>TODOS</option>")
for (elemento in valores) {
$("#filtroColuna_" + coluna.toString()).append("<option>" + valores[elemento] + "</option>");
}
$("#filtroColuna_" + coluna.toString()).change(function() {
var filtro = $(this).val();
$("#" + tabela + " tbody tr").show();
if (filtro != "TODOS") {
$("#" + tabela + " tbody tr").each(function() {
var txt = $(this).children("td:nth-child(" + coluna + ")").text();
if (txt != filtro) {
$(this).hide();
}
});
}
});
};
AdicionarFiltro("tab", 2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<center>
<h1>Log das Integrações</h1>
</center>
<div class="table-responsive">
<table id="tab" class="display table" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Valor</th>
<th>Erro</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Davi</td>
<td>300</td>
<td>Não</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>200</td>
<td>Não</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>400</td>
<td>Sim</td>
</tr>
<tr>
<td>004</td>
<td>Davi</td>
<td>300</td>
<td>Não</td>
</tr>
<tr>
<td>005</td>
<td>Ingrid</td>
<td>800</td>
<td>Não</td>
</tr>
<tr>
<td>006</td>
<td>Letícia</td>
<td>400</td>
<td>Sim</td>
</tr>
<tr>
<td>007</td>
<td>Ronaldo</td>
<td>800</td>
<td>Sim</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>300</td>
<td>Não</td>
</tr>
<tr>
<td>009</td>
<td>Andrew</td>
<td>300</td>
<td>Sim</td>
</tr>
<tr>
<td>010</td>
<td>Stephen</td>
<td>300</td>
<td>Não</td>
</tr>
<tr>
<td>011</td>
<td>Julio</td>
<td>400</td>
<td>Não</td>
</tr>
<tr>
<td>012</td>
<td>Marcos</td>
<td>300</td>
<td>Não</td>
</tr>
<tr>
<td>013</td>
<td>Diego</td>
<td>300</td>
<td>Não</td>
</tr>
</tbody>
</table>
</div>