0

Pq só está funcionando a última função do método addEventListener do meu script. Estou desenvolvendo filtros em uma DataTable que quando clico no botão de buscar ele filtra na tabela as informações. As funções de filtro estão funcionando, porém só funciona individual.

HTML:

<label for="proto">Protocolo</label>
<input type="text" class="form-control" name="proto" id="proto" 
 placeholder="Pesquisar...">

<label for="nome">Nome</label>
<input type="text" class="form-control" name="nome" id="nome"  
placeholder="Pesquisar...">

<label for="doc">Documento</label>
<input type="text" class="form-control" name="doc" id="doc" 
placeholder="Pesquisar...">

<button class="btn btn-primary btn-block" id="btnBuscar">Buscar</button>

Script:

function proto() {
    var proto, filter, table, tr, td, i;
    proto = document.getElementById("proto");
    filter = proto.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }    
    } 
}

function nome() {
    var nome, filter, table, tr, td, i;
    nome = document.getElementById("nome");
    filter = nome.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[3];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }    
    }       
}

function doc() {
    var doc, filter, table, tr, td, i;
    doc = document.getElementById("doc");
    filter = doc.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[4];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }    
    }   
}

document.getElementById("btnBuscar").addEventListener("click", function(){
    proto();
    doc();
    nome();
});
6
  • 1
    Leandro a chamada para as 3 funções está correta, verfique no console do seu navegador se não é exibido nenhum erro, tente adicionar o html a sua pergunta para podermos testar as funções :) 20/10/2017 às 15:27
  • @CaiqueRomero Inseri o Html, no console não mostra erro algum.
    – LeAndrade
    20/10/2017 às 16:02
  • explique exatamente seu erro e o que está acontecendo, adicione a pergunta, se possível anexe uma imagem com o que está acontecendo e o que deveria acontecer por favor
    – Costamilam
    20/10/2017 às 19:07
  • @GuilhermeCostamilam Então não tenho como te informar o erro pois não da erro no console, simplesmente o botão não faz a filtragem na tabela com o clique no botão.
    – LeAndrade
    20/10/2017 às 19:11
  • Ocorre algum erro no console?
    – Reptile
    20/10/2017 às 20:03

3 Respostas 3

3

Na verdade, os 3 estão funcionando, como o console sem erros mostra.

O que acontece é que, independente do que você fez antes, a última chamada vai sobrescrever ou apagar o valor de tr[i].style.display.

O que pode fazer, mantendo o javascript puro nas funções, é criar uma função para "resetar" tudo, limpando os displays e, por consequência, mostrar tudo, e em seguida chamar as funções, que só colocam o display: none, sem mudar o conteúdo quando o filtro passar.

    function resetFilters() {
        table = document.getElementById("table");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            tr[i].style.display = "";
        }
    }

    function filterByText(filter, tdColumn) {
        table = document.getElementById("table");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[tdColumn];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) === -1) {
                    tr[i].style.display = "none";
                }
            }    
        } 
    }

    function proto() {
        var proto, filter;
        proto = document.getElementById("proto");
        filter = proto.value.toUpperCase();
        filterByText(filter, 0);
    }

    function nome() {
        var nome, filter;
        nome = document.getElementById("nome");
        filter = nome.value.toUpperCase();
        filterByText(filter, 3);
    }

    function doc() {
        var doc, filter;
        doc = document.getElementById("doc");
        filter = doc.value.toUpperCase();
        filterByText(filter, 4);
    }

    document.getElementById("btnBuscar").addEventListener("click", function(){
        resetFilters()
        proto();
        doc();
        nome();
    });
3
  • o seu funcionou aí? Aqui comigo aconteceu que apenas a última função chamada, ou seja, nome() aplicou o filtro as outras não.
    – LeAndrade
    20/10/2017 às 20:09
  • não cheguei a testar, não tenho a tabela pronta, mas editei pois encontrei erros na minha modificação, veja se vai agora
    – Dudaskank
    20/10/2017 às 20:13
  • Perfeito man, funcionou certinho, muitíssimo obrigado pela ajuda!
    – LeAndrade
    20/10/2017 às 20:20
-1

Não entendi muito bem, voce quer atribuir um evento de click e chamar estas 3 funções?

Se sim

$(botao).click(function () {
  proto();
  nome();
  doc();
});
5
  • Assim já testei com jQuery e javascript e não funciona.
    – LeAndrade
    20/10/2017 às 16:03
  • Eu realmente não entendi direito o que você quer, e qual seu erro
    – R. Pêgo
    20/10/2017 às 16:18
  • Quero que quando vou no input de filtro de protocolos e aperto o botão a tabela mostra o resultado do filtro na tabela, ok, isto já funciona se for só com a função proto(), porém se eu for no input de nome e digitar um nome, na tabela não acontece nada, a função nome(), não executa.
    – LeAndrade
    20/10/2017 às 18:15
  • Então o que passei nao resolve seu problema, perdão.
    – R. Pêgo
    20/10/2017 às 20:32
  • que isso cara, não precisa pedir perdão não, tentou ajudar, isto já é muito bacana.
    – LeAndrade
    21/10/2017 às 19:14
-1

Você também pode fazer direto pelo HTML

<button onclick="proto();doc();nome()" ...
7
  • Já testei assim direto no html, não funciona.
    – LeAndrade
    20/10/2017 às 16:04
  • Esse código funciona como um filtro que percorre a tabela e seta display: none nas linhas que que não são relacionadas ao filtro, certo? não tenho certeza mas acredito que os 3 estão funcionando porém estão sendo sobrescritos, no caso doc() sobre escreve proto() e nome() sobre escreve doc(),
    – Costamilam
    20/10/2017 às 17:06
  • Exatamente isto que ocorre na tabela, mas, pq uma função sobrescreve a outra, se essa é a maneira correta de se invocar funções em um mesmo evento?
    – LeAndrade
    20/10/2017 às 18:11
  • Bom se eu estiver certo o que ocorre é que quando tu chama o primeiro evento ele seta display: none em certa linha por causa desse filtro e quando tu chama a segunda ele seta em branco o display dessa mesma linha, acredito que é isso que está ocorrendo
    – Costamilam
    20/10/2017 às 19:02
  • Você precisa usar mais de um filtro? Exemplo nome Gui e proto 123 apenas um único filtro por vez é suficiente?
    – Costamilam
    20/10/2017 às 19:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .