Helper para DataTables

sexta-feira, 28 de Agosto de 2009

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 -%>
        
        
        
        
        
        
        
        
        
      
<% 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
        
        
        
        
        
        
        
        
        
      
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}) %>
        
<% 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.