Marcio Trindade

28Ago/090

Helper para DataTables

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:

<% 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:

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:

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

Comentários (0)

Nenhum comentário ainda.


Deixe um comentário


(não será divulgado)