Tabelas dinâmicas com jQuery DataTable - Básico

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Nesta aula irei mostrar como criar tabelas dinâmicas de verdade utilizando o plugin jQuery DataTable. Esse tipo de tabela é muito utilizado em painéis administrativos de sites, evitando assim a necessidade de criar funções para filtrar, pesquisar e paginar dados vindos do banco.

Depois de conhecer este plugin é bem provável que seus sistemas irão ter outra cara, ao menos no que diz respeito à dados tabulares. Confira a aula e bom estudo. Se gostar da aula deixe um comentário depois...

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 24 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Frank comentou em

    Ricardo, acompanho sempre o blog da RBTech, e sempre aprendo muito por aqui.
    CRUD, DataTables, PHP com orientação a objetos, cara todo muito bem explicado e funcional.
    Tenho uma dúvida com relação ao uso do Data Tables.
    é o seguinte, eu ja uso faz tempo esse plugin, mas agora preciso montar uma tabela e no final dela mostra o resultado da soma de duas colunas, e não achei uma forma de fazer isso, será que é possível fazer esse resultado aparecer na ultima linha de uma tabela montada com Data Tables?
    Se houver essa possibilidade você poderia me dar essa dica... fico muito grato.

    Responder
    • Não tenho certeza, mas acho que na documentação do DataTable tem um exemplo que mostra como fazer a soma de uma coluna no final da tabela, dê uma procurada lá.

      Responder
  • Paulo Henrique comentou em

    Muito boa video aula, Ricardo gostaria de saber se tem como ordenar essa dataTable pela data, porque no meu caso eu tento ordenar por data ela fica desse jeito;

    01/05/2013
    01/06/2013
    01/07/2013
    02/05/2013
    02/06/2013
    02/07/2013

    logo não ficando ordenada, ou seja ela traz primeiro o dia 1 depois o dia 2 depois dia 3 e assim por diante. estou pegando a data no banco de dados. Agradeço a sua ajuda desde já

    Responder
  • Adilson Rumão comentou em

    Olá parabéns pela ótima VA, estou testando aqui e tentando pegar o ID para usar no form de alteração dos registros. Alguém conseguiu fazer algo pareceido?
    Se coloco os campos Editar e Excluir ao clicar sobre ele, vai ordernar tbm não?

    Alguém tem um dica de como proceder neste caso?

    Responder
  • thiagoluna comentou em

    Nossa, que rapidez em criar uma tabela com paginação e busca. Como perdi tempo criando paginação e ordenação ...
    Muito legal esta video aula.
    Alguma previsão para as próximas aulas do DataTable?

    Responder
  • Adilio Gobira Neves Reis comentou em

    eu to com um problema aqui no meu,
    Aqui tah aparecendo um erro

    DataTables warning (table id = 'primeiro'): Requested unknown parameter '1' from the data source for row 0

    Responder
  • Renato comentou em

    Boa tarde Ricardo!

    Excelente vídeo aula.
    Mas na ocasião, o parabenizo e vou acorrer-lhe com o fim de sanar uma dúvida.

    Estou selecionando os dados de uma tabela mysql via while(){} do php, e até aí, tudo ok.

    Mas acontece, que tenho um menu vertical que é exibido ante o método :hover do css, e este menu, quando encontra com a tabela, vai pra debaixo dela, quando na realidade, deveria ser posicionado sobre ela.

    Com a expertise que você possui aliada a sua sólida experiência, você teoriza sobre o que possa estar acarretando isto?

    Obrigado!

    Responder
    • Provavelmente é o CSS de algum dos elementos de seu site, que pode estar no float ou no position(absolute/relative) de algum objeto. Basta remover floats e position dos elementos de seu site e ver onde está o problema. Isso já me aconteceu muitas vezes quando pego algum template pronto e coloco menus drop-down nele, rs.

      Espero ter ajudado.

      Abraço

      Responder
  • perdeu comentou em

    e para order algum campo de data, tem alguma configura especial?........esses plugins de ordenação sempre tem problema para ordenar data ja testei 3 =S

    Responder
  • Wilson comentou em

    Ricardo, grato por mais esta va muito show.
    Espero que logo faça uma pegando dados do BD.

    Que 2012 seja um ano de paz e sucesso pra você.

    Responder
  • eltin182 comentou em

    Caaaaara q plugin SHOWWW perfeito, gostei muito, to impressionado :O
    Serio, preciso muito disso e nao fazia ideia q tinha isso, muito bom, parabens pela video aula!!

    Responder
  • Alessandro comentou em

    Show de bola essa aula...estava já pensando em aplicar esse plugin no painel administrativo do meu site...uma vez tinha visto algo na net sobre isso e agora me deparei novamente com este assunto...hora de pôr em prática!
    Parabéns..vlw pela aula..aguardando as próximas.

    Feliz Natal e um 2012 cheio de realizações.

    Responder

Deixe seu comentário