Marcio Trindade

Helper para DataTables

Vasculhando pelo site da jQuery encontrei este pluguin DataTables que me chamou a atenção e então procurei aplicar o mesmo na parte administrativa no meu blog. Inicialmente criei um partial para instanciar o plugin javascript com o seguinte código:

aplication.html.erb
<% content_for :head do -%>
        <% javascript_tag do -%>
        $(function(){
                $("#table").dataTable( {
                        "aaSorting": <%= sort rescue '[[ 0, "asc" ]]' %>,
                        "sPaginationType": "full_numbers",
                        "bStateSave": true,
                        "bInfo": false,
                        "iDisplayLength": 50,
                        "oLanguage": {
                                "sUrl": "/javascripts/plugins/data_tables_<%= I18n.locale %>.js"
                        }
                }).css("width", "auto");
        });
        <% end -%>
<% end -%>

Então eu passava para este partial uma variável local com o nome de sort a fim se alterar qual deveria ser a coluna inicial para ordenar. Porém surgiu a necessidade de passar mais parâmetros, foi então que percebi o quanto o código estava sujo e nada funcional. Com a idéia de melhorar o mesmo gastei pouco mais de 2 minutos e criei um helper para fazer isto de uma forma muito mais elegante. Veja o código abaixo:

application_helper.rb
def data_table(options={})
 options.reverse_merge! "sPaginationType" => "full_numbers",
                        "bStateSave" => true,
                        "bInfo" => false,
                        "iDisplayLength" => "100",
                        "aaSorting" => [[ 0, "asc"]],
                        "oLanguage" => {"sUrl" => "/javascripts/plugins/data_tables_#{I18n.locale}.js"}
 content_for(:head) do
   javascript_tag do
     "$(function(){oTable = $('#table').dataTable(#{options.to_json}).css('width', 'auto');});"
   end
 end
end

Como você pode ver criei uma configuração padrão e você pode alterar qualquer uma delas passando um hash como parâmetro para a chamado do método. Veja o exemplo a seguir:

example.html.erb
<% data_table({"aaSorting" => [[ 3, "desc"]], "bInfo" => true}) %>

Com um pouco de atenção e um pouco de tempo você pode melhorar a qualidade do seu código assim como eu melhorei a minha. Afinal além de mais elegante o código ficou fácil de entender, de manter e principalmente com uma melhor performance.