Como fazer uma busca em tabela

Front-end JavaScript
#1

Boa tarde pessoal.

Estou precisando aplicar no meu projeto uma busca em minha tabela, sendo que não está funcionando. A a tabela é dinâmica, montada do lado servidor.

Veja um trecho da montagem da tabela:

protected string montarBody(Indicador indicador) { StringBuilder htmlDivsConteudoRelatorio = new StringBuilder();

    htmlDivsConteudoRelatorio.Append("<tr class='indicador'>");
    htmlDivsConteudoRelatorio.Append("<td class='larguraColuna info-sigla'>" + indicador.sigla + "</td>");
    htmlDivsConteudoRelatorio.Append("<td class='info-descricao'>" + indicador.nome + "</td>");
    htmlDivsConteudoRelatorio.Append("</tr>");

    return htmlDivsConteudoRelatorio.ToString();

}

Na classe aspx , veja:

Busca:

E no javaScript:

var campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input", function () {
    var siglas = document.querySelectorAll(".indicador");

    if (this.value.length > 0) {
        for (var i = 0; i < siglas.length; i++) {
            var sigla = siglas[i];
            var tdSigla = sigla.querySelector(".info-sigla");
            var nome = tdSigla.textContent;
            var expressao = new RegExp(this.value, "i");

            if (!expressao.test(nome)) {
                sigla.classList.add("invisivel");
            } else {
                sigla.classList.remove("invisivel");
            }
        }
    } else {
        for (var i = 0; i < siglas.length; i++) {
            var sigla = siglas[i];
            sigla.classList.remove("invisivel");
        }
    }
});

Ao realizar os testes o filtro não funciona. Estou fazendo algo de errado?

Obrigada. Flávia

#2

Ainda não consegui, se alguém puder me ajudar ficarei muito grata.

#3

Olá @Flavia1!

Eu não olhei o código, mas ve se isso aqui te ajuda:

https://datatables.net/examples/styling/bootstrap4

É uma solução completa para filtro, ordenação, paginação, etc para tabelas. Basta importar os arquivos e referenciar a sua tabela que já funciona.

O link que postei foi para tabela que usa bootstrap4, mas tem sem bootstrap também

https://datatables.net/examples/styling/no-classes.html

#4

Olá Mike.

Dei uma olhada no link que me passou, sendo que não me atende pois não estou trabalhando com DataTable.

O meu grande problema é que estou montando a tabela do lado servidor(.css) e quando faço a busca estou do lado cliente, sendo assim não sei como recarregar a tabela montada no servidor de acordo com os dados do filtro. Não sei se isso é possível.

Obrigada.
Flávia

#5

O DataTable seria a tag table do html, você esta utilizando ela, não esta?

A tabela esta populada com os dados do servidor e ai você utiliza o filtro para achar o registro x, certo? Se sim, o link que te passei te ajudará

#6

Mike.
Se puder dê uma olhada no meu código. Não tenho html, pois o projeto está todo em aspx. Montei a tabela do lado servidor e no cliente tenho uma combo que ao trocar o item a tabela é carregada de acordo com o item selecionado.
Sendo que na minha ideia para fazer a busca , o cliente deve clicar no text da busca, digitar o valor e quando o valor for digitado a tabela deve ser novamente recarregada de acordo com dados do filtro.
Não sei se seria assim, sou iniciante na área.

Obrigada.
Flávia

#7

Oi Mike.

Tem um código com jquery que facilita fazer esta busca, veja:

$(document).ready(function () {
$("#txtBusca").on(“keyup”, function () {
var value = $(this).val().toLowerCase();
$("#tabela tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});

Estou querendo testar, sendo que não entra na função ready. Não sei o que está ocorrendo.

Obrigada.
Flávia

#8

Tem o HTML no browser gerado pelo seu aspx. Isso ajuda quem for te ajudar.