Paginação em Javascript – Parte 1

Meus queridos, devido à falta de tempo que estou tendo e um pouco de preguiça, decidi prorrogar o post da parte 2 de MVC em javascript. Eu acho muito interessante esse assunto e não posso expor minha idéia assim de qualquer jeito.

Antes, gostaria de compartilhar um código de paginação em Javascript. Gosto muito desse código porque foi o primeiro projeto que desenvolvi em Javascript quando era apenas um garoto na linguagem. Na época, num compromisso pessoal, decidi que iria sem olhar referencias na internet e sem me poluir com códigos prontos, desenvolver uma “Função” ( na época eu desenvolvia funções rsrs ) que pudesse fazer uma paginação, toda feita em Js.

Então, desenvolvi o algoritmo para a paginação por conta própria, da qual me orgulho até hoje, e depois de muito tempo, refatorei o código pela primeira vez e implementei algumas coisas de forma mais atual no que diz respeito ao desenvolvimento orientado à objetos em Js e etc.

Esta primeira refatoração fiz há algum tempinho, então é claro que é necessário uma nova revisão do código, porque ele está em algumas partes redundante e precisa de melhorias.

Decidi quebrar este post em duas partes, porque fiz uma nova versão deste código usando todos os princípios atuais e usando conceitos novos que adquiri com minha experiência na linguagem. Na segunda parte vou mostrar essa nova forma de fazer e seus prós e contras em contraste com essa versão mais antiga.

De qualquer forma na versão 1.3.2, ele em duas vezes me salvou a vida e de forma perfeita não me deixou na mão em nenhum momento. Simples, prático, rápido, me ajudou em duas aplicações bem complexas e por isso merece estar aqui.

Vamos lá à explicação de como funciona.

Sua idéia é bem simples, ele pega duas listas no html, uma que contem a classe jsP-pages, de onde vai embutir as páginas da paginação, e a outra que contem a classe jsP que contém a sua lista de itens paginados.

Se esses dois elementos não existirem ele os cria.

Então vamos ao código:

var pagination = new jsP.Class('content')
	pagination . open({		
		$ : options,				
		size   : pages.length,
		show   : 3,
		iterate: function(x){			
			$('<li />').appendTo(this).load( pages[x] )				
		},
		callback: function(){}			
	})

Então, o objeto é instanciado passando como string o id do objeto pai onde guardará a paginação, um container e ele contem apenas um método público que é o open.

O método open recebe um json com algumas opções para o desenvolvedor, são elas:

$ : um curinga, que guarda as opções dos plugins.

size: O tamanho total da quantidade da informação à ser mostrada.

show: A quantidade de informação à ser mostrada por vez na página.

iterate: A função que é chamada n vezes de acordo com o size e o show passados anteriormente, e é nessa função que você como desenvolvedor vai decidir o que será feito.

O iterate recebe um valor inteiro como argumento que são os índices dos elementos que fazem parte do conteúdo da paginação e é chamado no escopo do elemento html de classe “jsP”.

No exemplo acima, eu tenho um array contendo a url das páginas em ajax que desejo carregar. Então, se o array tiver um length igual à 6, por exemplo, haveriam duas páginas e o iterate ia ser chamado 3 vezes na primeira página e 3 vezes na segunda, variando o x de 0 à 2 no nosso caso.

O jQuery ali é bem simples, para cada página ele irá criar x li’s cujo conteúdo é carregado por ajax na url do array pages.

Importante saber é que se você tem 50 páginas, o jsPagination vai chamar apenas o iterate da página atual. Então se você clica na página 2, ele chamará o iterate de novo, x vezes. Aí está o ponto forte da classe, e até hoje eu me espanto, porque a lógica foi bem desenvolvida sendo na época em que estava engatinhando no ramo da programação. Mesmo com uma experiência maior de hoje, pouquíssimas coisas tenho desenvolvido com tamanha inteligência na lógica, claro, relativamente falando.

Voltando, o callback é uma função que é chamada no momento que a página atual da paginação é chamada e é opcional, deixei vazio ali apenas para lembrar que ele existe.

Como havia falado, existe o curinga “$” onde você configura os plugins do jsPaginator, que tem por padrão 3 plugins:

map: que recebe uma funcão que é executada para cada elemento listado na página atual.

currency: responsável por colocar uma classe na listagem de páginas da página atual. Pode ser passado um booleano true, onde o jsPagination vai colocar uma classe padrão, ou pode ser passado um json contendo uma chave “classe” e um valor do tipo string contendo o nome da classe desejado pelo programador.

nextPrev: responsável por adicionar mais dois links na lista das páginas da paginação, próximo e anterior.
Ele pode ter apenas um booleano com valor true ou false para ser usado. Ou pode receber um json contendo 5 atributos:
prev : A string que aparecerá na listagem indicando a página anterior. por default é “Anterior”.
next : A string que aparecerá na listagem indicando a página posterior. por default é “Próximo”.
clPrev : A string com o nome da classe do elemento prev. por default é “anterior”.
clNext : A string com o nome da classe do elemento posterior. por default é “proximo”.
hidePages: Recebe um booleano que define se os números das páginas devem ser ocultos, apenas permanecendo o next e prev.

Bom, sabendo tudo isso, já dá pra mostrar o resto do código de exemplo que mostrei lá em cima no começo do post, para fazer mais sentido:

var pages = [
	"pages/conteudo1.htm",
	"pages/conteudo2.htm",
	"pages/conteudo3.htm",
	"pages/conteudo4.htm",
	"pages/conteudo5.htm"
]

var options = {
	map:function(element){
		$(element)
			.css({
				'border': '1px solid red',
				'width' : '300px',
				'height': '50px',
				'margin': 'auto'
			})				
		
	},			
	currency: true,
	nextPrev: { hidePages: false}					
}

var pagination = new jsP.Class('content')
	pagination . open({		
		$ : options,				
		size   : pages.length,
		show   : 3,
		iterate: function(x){			
			$('<li />').appendTo(this).load( pages[x] )				
		},
		callback: function(){}			
	})

Viram? o size seria o tamanho do array, show mostra a quantidade de elementos que quero mostrar e iterate é o corpo da função que irá criar os elementos dinamicamente =). Acho que nesse código ficou mais clara a forma como se usa o curinga, é apenas um objeto contendo opções dos plugins. Coloquei este objeto em uma variável chamada options para não poluir a chamada do método da classe.

É bem simples de ser usado…

Embora ele desempenhe bem o seu papel, ele é lento, pois mexe no DOM o tempo todo, removendo o conteúdo das duas listas e adicionando novo conteúdo sempre que é paginado.

Mostrarei como contornar este problema na próxima parte do post.

Bom, vou deixar aqui no post a última versão da classe, que está na 1.3.2.
jsPagination.zip

E para quem quer ver um exemplo prático,tem um aqui:
/jsPagination

Neste link usei um Css para a galeria de imagens, o Css Hoverbox Image Gallery que vi neste post do Danilo no TidBits.

No demo, o jsPagination ainda está numa versão mais antiga, mas suas chamadas e métodos funcionam da mesma forma, mantendo a retrocompatibilidade. Então, se achar melhor entender o código do exemplo prático, fique à vontade =).

Mas pegue o código fonte daqui que é melhor, vai estar sempre atualizado =).

Um grande abraço.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s