Introdução
Para quem não conhece ou não tem muita experiência com a utilização de plugins para Javascript, vamos mostrar a implementação básica do plugin para jQuery: o chamado DataTables.
DataTables é um plugin para jQuery que proporciona uma interação maior com a tabela do HTML. Em grossas palavras, ele transforma sua tabela em um componente mais útil adicionando como por exemplo: paginação e campo de busca.
Visão Geral
- O artigo se baseia no exemplo disponível no github.
- Para quem não está familiarizado, estou utilizando a gem HAML, que é apenas uma forma diferente de escrever HTML. Isso não irá interferir em nada a não ser o modo de escrever o HTML mesmo.
- Estou considerando que você já tenha conhecimento de projetos RubyOnRails e que seu projeto já esteja utilizando o jQuery. Isso é estritamente necessário para que funcione o DataTables.
Obtendo o DataTables
O primeiro passo é fazer o download do plugin e adicionarmos ele em nossa aplicação. Basta clicar aqui para fazer o download.
Descompactando arquivos úteis
Após descompactar, voce irá notar que ele tem vários arquivos e nem todos serão úteis para nossa aplicação. Precisaremos apenas dos arquivos que se encontram no diretório media.
Copie este diretório para dentro do diretório javascripts da sua aplicação e renomeie para datatables.
Incluindo arquivos
Agora já temos os arquivos necessários para utilizar o DataTables. Porém, precisamos fazer a inclusão desses arquivos em nosso projeto.
Lembrando que devemos incluir os arquivos Javascript e os arquivos de CSS.
#css = stylesheet_link_tag "/javascripts/datatables/css/demo_table.css"
#javascripts = javascript_include_tag "datatables/js/jquery.dataTables.min.js"
Criando uma tabela
Sua tabela não pode ser criada de qualquer jeito. O DataTables necessita que sua tabela esteja conforme o exemplo abaixo.
%table.example %thead %tr %th Id %th Name %tbody %tr %td 1 %td "Carro" %tr %td 2 %td "Moto"
Uma observação: é necessário que sua tabela possua as tags <thead> e <tbody>
Transformando a tabela em DataTables
Feito isso, agora vamos apenas chamar o método do DataTables que irá transformar a nossa tabela. Basicamente é pegarmos a tabela e chamarmos o método dataTable(). Deverá ficar similar ao exemplo abaixo:
-content_for :javascript do
:javascript
$("table.example").dataTable();
Pronto, já temos o DataTables funcionando. Muito simples. Ele possui melhores personalizações que você poderá ver no projeto de examplo que criei. O que foi dito acima é apenas o básico.
Informações sobre o exemplo
O exemplo que se encontra no meu github possui as seguintes características:
Ruby 1.9.2-p290 Rails 3.0.10 haml 3.1.2 jquery-rails 1.0.13 sqlite3 ffaker 1.8.1
Fonte: Adriano Todao/IMasters