Arquivo da tag: RubyOnRails

DataTables com RubyOnRails

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