Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Pesquisando dados dentro de uma tabela usando jQuery – Quick Search Table jQuery

Olá pessoas, hoje vou mostrar como fazer uma pesquisa rápida dentro de um conteúdo de uma tabela de HTML sem usar banco de dados, ou seja, vamos fazer um campo de busca que traz os dados contidos numa tabela e esconde os demais.

Primeiro vamos a marcação em HTML, neste tutorial vamos usar a propriedade table, para este exemplo é importante que você use as propriedades thead e tbody para que funcione bacana, essas duas tag´s servem para mostrar ao navegador onde está o cabeçalho da sua tabela (parte onde tem os títulos da tabela) e onde fica o corpo da sua tabela (parte dos dados da tabela). Veja o exemplo abaixo:

<table class="lista-clientes">
    <thead>
        <tr>
            <th align="center">#</th>
            <th>Cliente</th>
            <th>Carro</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center">1</td>
            <td>José Ribeiro</td>
            <td>VW Gol 1.0</td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td>Maria Conceição</td>
            <td>Fiat Palio 1.0</td>
        </tr>
        <tr>
            <td align="center">3</td>
            <td>Lourdes Silva</td>
            <td>Chevrolet Cosa 1.0</td>
        </tr>
        <tr>
            <td align="center">4</td>
            <td>Marcos Henrique</td>
            <td>VW Jetta 2.0</td>
        </tr>
    </tbody>
</table>

Para o campo de buscar você precisa de um imput do tipo texto com a classe input-search e com o atributo alt o mesmo da classe da tabela no nosso exemplo é lista-clientes, como mostra o exemplo abaixo:

<script type="text/javascript" src="jquery.js"></script>

Agora vamos instanciar a biblioteca do jQuery

<input type="text" class="input-search" alt="lista-clientes" placeholder="Buscar nesta lista" />

E agora o código para fazer a pesquisa dentro da tabela conforme você vai digitando

$(function(){
    $(".input-search").keyup(function(){
        //pega o css da tabela 
        var tabela = $(this).attr('alt');
        if( $(this).val() != ""){
            $("."+tabela+" tbody>tr").hide();
            $("."+tabela+" td:contains-ci('" + $(this).val() + "')").parent("tr").show();
        } else{
            $("."+tabela+" tbody>tr").show();
        }
    }); 
});
$.extend($.expr[":"], {
    "contains-ci": function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});
Uma dica para economizar seu código crie um arquivo novo de JS e coloque as instruções acima e instancio-o como o arquivo jquery.js, assim você economiza espaço de código e se precisar dar manutenção será feito para todos os campos de busca rápida.
<script type="text/javascript" src="jquery.quick.search.js"></script>

Agora vamos estilizar um pouco as coisas aqui, vamos dar uma cara melhor ao nosso código, veja o CSS abaixo:

<style type="text/css">
    body{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif }

    /* " Para o input */
    .input-search{
        border:1px solid #CCC;
        padding:5px 14px;
        font-size:12px;
        margin:10px 0;

        -webkit-border-radius:15px;
           -moz-border-radius:15px;
            -ms-border-radius:15px;
             -o-border-radius:15px;
                border-radius:15px;
    }
        .input-search::-webkit-input-placeholder{ font-style:italic }
        .input-search:-moz-placeholder          { font-style:italic }
        .input-search:-ms-input-placeholder     { font-style:italic }

    /* " Para a tabela */
    table.lista-clientes{
        border-collapse:collapse;
        font-size:11px;
        font-family:Tahoma, Geneva, sans-serif;
    }
        table.lista-clientes th{
            padding:5px;
            background:#EEE;
            border:1px solid #CCC;
        }
        table.lista-clientes td{
            padding:3px;
            border:1px solid #CCC;
        }    
</style>

Importante este trecho de código funciona para a lista que esta sendo exibida, caso tenha uma paginação não exibira os dados das páginas seguintes, ou seja mostrará apenas o que o usuário ver na tela não o que está no banco de dados.

Fonte: http://blogs.digitss.com




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (23)

  • Mano, gostaria de fazer isto ai, porém minha tabela está distribuídas em páginas, como poderia fazer a busca em toda a tabela e não apenas o que esta sendo visualizada

  • Adriano Meira disse:

    Opa cara você pode colocar toda a tabela na sua página e a partir da linha (por exemplo) 10 você coloca um “display:none” nas tr da tabela. Ou de uma forma mais bacana use a função ajax, e na página onde vai consultar você faz a pesquisa no banco de dados.

    Veja este artigo, onde explico como usar a função. Até mais.

  • Fernanda disse:

    Bem bacana o artigo, era exatamente o que eu precisava. 🙂 Obrigada!

  • Maira disse:

    Obgada, pelo artigo!

  • Adriano Meira disse:

    Opa por nada 🙂

  • Jonas Tomazelli disse:

    Parabéns Adriano, ótimo post, uma função muito legal. Vai agilizar minhas paginas. Explicação simples e funcional. Abraço!!!

  • Raphael Ataide disse:

    Adriano muito bom este seu código para pesquisa em uma tabela. Eu implementei ele em uma tabela que mescla células usando o td rowspan. Neste caso ao buscar nao mostra certo. Se puder me ajudar a fazer a modificação no código eu agradeço.

  • Adriano Meira disse:

    Olá Raphael

    Desculpe a demora, mas para eu poder lhe ajudar poderia me mostrar (poe enviar um txt) com a estrutura de HTML da sua tabela!? Assim posso testar e ajustar o código.

    Até mais!

  • Gilberto disse:

    Fera, curti demais isso ai. 100%

  • Adriano disse:

    Muito bom esse código, me ajudou muito.
    Obrigado

  • Ronaldo Brito disse:

    Bom dia Adriano.

    Muito bom seu post. Mas minha dúvida é o seguinte. Se eu tiver informações na tabela vindo do banco de dados, eu consigo adapta-lo para o mesmo?

  • Adriano Meira disse:

    Olá Ronaldo

    Se entendi bem, seus dados estão salvos em banco de dados, ao fazer o looping e gerar a tabela você pode utilizar si este código que descrevi, mas ele não irá fazer isso de forma dinâmica dentro da pesquisa do banco, talvez esta outra publicação http://www.adrianomeira.com/blog/usando-a-funcao-ajax-do-jquery pode lhe ajudar a busca no banco de dados de fora mais dinâmica.

  • pablo disse:

    parabens me ajudou pra caramba, to desenvolvendo um sistema e erá uma busca assim que eu tava precisando

  • robsons disse:

    boa noite amigo meus parabens pelo artigo gostei muito .tinha como vc me ajuda to criando um site e nele tem muita pagina ,eu queria saber se vc tem algum artigo falando como criar um sistema de busca para localizar o artigo dentro do site igual esse so que esse busca o que esta visivel eu queria que ele aparece o que esta em outra pagina desde ja agradeço.

  • Adriano Meira disse:

    Olá Robsons

    Puxa tem como sim, mas você vai precisar usar mais coisas, como um banco de dados e uma linguagem de programação, como o PHP. Este scripts só executa dentro da página e muito simples, para buscar algo em uma página o ideal seria que este conteúdo estivesse no banco de dados. Infelizmente não tenho um artigo sobre, posso anotar aqui e fazer um mais avançado falando sobre.

    Até mais!

  • robsons disse:

    obrigado amigo ,sempre estou olhando seu site .e script de comentario tem aqui no seu site igual a esse que eu esto escrevendo agora

  • GUSTAVO disse:

    Adriano,

    Implementei esse código e funcionou perfeitamente, no entanto, tenho a necessidade de filtrar a tabela duas vezes. Selecionar primeiro a “CIDADE” e depois o “GRUPO RESPONSÁVEL”, mas esse filtro tem de ser feito apenas no que já foi filtrado anteriormente. Não sei se ficou claro. Poderia me ajudar?

  • Adriano Meira disse:

    Olá Gustavo

    Cara tem sim, você pode utilizar a Função KeyUp do jQuery para poder pesquisar, daí você utiliza dois campos de busca e cada um buscando em sua respectiva lista. Neste link http://www.adrianomeira.com/blog/buscar-conteudo-na-pagina-funcao-keyup-do-jquery mostro como funciona a função, é praticamente a mesma função deste artigo, porém você pode mudar “#lista_contatos tbody tr” para a lista que desejar, ou seja faça um campo que procure pela classe “.cidade” e outro pela classe “.grupo-responsavel”.

  • Patrícia disse:

    MUITO obrigada!! Funcionou perfeitamente.

  • Elton disse:

    Perfeito, me ajudou muito. Obrigado

  • Thiago Castro disse:

    Como eu faço a pesquisa dessa forma adicionando paginação? Ou seja como pesquisar nessa tabela com paginação.

  • Rafael disse:

    Muito bom, e fácil! apliquei na minha lista de dúvidas (ul) muito simples, é disso que precisamos. Vlw pelo compartilhamento Adriano!

  • Giano Xavier disse:

    Bom dia Adriano, Como eu faço para puxar as informações de um banco mysql e ao invés de tabela e usar divs? quando coloca a palavra na busca, ele exibe o resultado em divs!

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...