Paginação

Depois de muito tempo sem conseguir postar, hoje eu estou muito feliz. Quando eu trabalhava na agência eu tive o meu primeiro contato com JQuery. Assim, eu já tinha ouvido falar sobre (muito bem por sinal), mas nunca tinha chegado perto.
Como o meu primeiro contato foi na base do “Ou vai ou racha” tive um pouco de raiva por não conhecer.

Há poucos meses eu comecei a trabalhar em uma empresa muito legal e nesse lugar eu tive a oportunidade de conhecer melhor o JQuery. Só digo uma coisa: a cada dia que passa, eu aprendo mais, eu me apaixono mais e mais.

Hoje eu digo que foi uma vitória. Tinha o seguinte desafio em minhas mãos: fazer a paginação utilizando JQuery e eu consegui !!!! *\o/*

Vamos começar com o código.
O código PHP (utilizei um texto achado na internet):

	<?php
		$texto = array(
			0 => '1 - Transforma diretriz constante do EIA do empreendimento "Aprofundamento da Calha do Rio Tietê-Trecho I"em exigência.',
			1 => '2 - Aprova nova minuta de decreto para regulamentar as APAs de Jundiaí e Cabreúva.',
			2 => '3 - Avoca para análise da Câmara Técnica de Empreendimentos Imobiliários o Plano de Trabalho para elaboração do EIA/RIMA do "Parque Temático Great Adventure".',
			3 => '4 - Aprova minutas de decreto para criação das APAs de Itupararanga, Sertão da Bocaina e Sapucaí-Mirim e do Colegiado Gestor que integra esta última à APA de Campos do Jordão.',
			4 => '5 - Funde Comissões Especiais para coordenar a implantação de APAs.',
			5 => '6 - Atribui à Comissão Especial de Políticas Florestais a tarefa de acompanhar o processo de implementação do Programa de Preservação da Mata Atlântica-PPMA.',
			6 => '7 - Acolhe o Parecer Técnico CPRN/DAIA 137/98 sobre a "Usina Hidrelétrica de Porto Primavera", acrescentando-lhe exigências para a LO.',
			7 => '8 - Designa conselheiros para a Comissão Especial Processante no exercício 98/99.',
			8 => '9 - Aprova o empreendimento Usina Hidrelétrica de Piraju, de responsabilidade da Cia. Brasileira de Alumínio-CBA.',
			9 => '10 - Recomenda o prosseguimento de ações para a implantação da segunda etapa do Sistema Integrado de Esgotos da RMSP/Projeto Tietê.',
			10 => '11 - Designa representantes para a Comissão Mista Permanente de Articulação e Integração do Consema com o CRH e com o Conesan.',
			11 => '12 - Modifica a composição da Comissão Especial Processante para o exercício de 98/99.',
			12 => '13 - Aprova diretrizes do Plano Diretor de Uso/Disposição de Lodo das ETEs da RMSP apresentado pela Sabesp.',
			13 => '14 - Aprova o empreendimento "Aterro Industrial para Resíduos Perigosos (Classe I)", de responsabilidade da SASA/Sistemas Ambientais e Comércio Ltda.',
			14 => '15 - Aprova o empreendimento "SPAT-Sistema Produtor Alto Tietê-Barragens de Biritiba-Mirim, Paraitinga e Complementação da Barragem de Taiaçupeba", de responsabilidade do DAEE/Departamento de Água e Energia Elétrica.',
			15 => '16 - Aprova o documento "Diretrizes para uma Política Estadual de Ecoturismo".',
			16 => '17 - Aprova minuta de decreto que regulamenta a Lei Estadual 7.438/91 e complementa o Decreto Estadual 20.960/83 referentes às APAs de Piracicaba-Juqueri-Mirim e Corumbataí, Botucatu e Tejupá.',
			17 => '18 - Aprova o empreendimento "Aterro Sanitário e Industrial – Aterro Ventura", de responsabilidade da Tecilix-Serviços Urbanos S/C Ltda.',
			18 => '19 - Acrescenta parágrafos sobre pedido de vista de documentos ao Artigo 8º do Regimento Interno do Conselho.',
			19 => '20 - Aprova o "Plano de Recuperação dos Mananciais da RMSP" e homologa Deliberação CBH-AT, nº 9, de 29/09/98.',
			20 => '21 - Aprova o empreendimento "Central de Tratamento de Resíduos Sólidos Urbanos Lara", de responsabilidade de Lara-Comércio e Prestação de Serviços Ltda.',
			21 => '22 - Atribui à Comissão Especial de AIA nova tarefa.',
			22 => '23 - Aprova Anteprojeto de Lei que Institui Política de Resíduos Sólidos do Estado de São Paulo.',
			23 => '24 - Aprova o empreendimento "Extração de Areia para Uso na Construção Civil", de responsabilidade de José Aleixo Machado Iperó Ltda.',
			24 => '25 - Cria Comissão Especial para reelaborar Minuta de Projeto de Lei sobre o Acesso aos Recursos Genéticos do Estado de São Paulo.',
			25 => '26 - Estabelece horário e duração das reuniões plenárias.',
			26 => '27 - Avoca a participação do Consema na elaboração do Termo de Referência do EIA/RIMA do empreendimento "Fazenda Baronesa - Clube de Golfe e Loteamento Residencial", de responsabilidade de Alphaville Urbanismo S.A.',
			27 => '28 - Aprova "Proposta de Zoneamento Ambiental para o Trecho Jacareí-Pindamonhangaba" e a "Proposta de Alteração da Resolução SMA 26/93".',
			28 => '29 - Altera a redação do Parágrafo 4º do Artigo 19 do Anteprojeto que Institui a Política Estadual dos Resíduos Sólidos.',
			29 => '30 - Aprova o empreendimento "Centro Tecnológico de Resíduos - CTR", de responsabilidade da Cia. Auxiliar de Viação e Obras - CAVO.'
		);

		#Imprime os dados setados acima
		foreach($texto as $t){
	?>
			<div class="texto"><?php echo $t;?></div>
	<?php
		}
	?>

Logo depois de imprimir os dados, eu coloco a paginação. Lembrando que será dinâmico (eu não sei quantos dados tem):

	<div id="paginacao"></div>

Agora o “filé mignon” do código, o Jquery:
1 – Coloco o JQuery:

	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

2 – O JQuery:

	<script>
		$(function(){
			//URL
			var url = window.location.href;
			//Valor do GET
			var get = url.split("=");
			
			//Tamanho do texto
			var tam = $(".texto").length;
			
			//Escondendo o conteúdo
			for(var i = 0; i < $(".texto").length; i++){
				if( i < (parseInt(get[1])-1)*4 || i > parseInt(get[1])*4-1 ){
					$(".texto")[i].hidden = true;
				}
			}
			
			//Mostrando a paginação
			if(tam%4 == 0){
				var num_pag = tam/4;
			}else{
				var num_pag = (tam-(tam%4))/4+1;
			}
			
			var aux = "";
			for(var j = 1; j <= num_pag; j++){
				if(get[1] == j){
					aux = aux + "<li><a href='?pag="+j+"' style='color:red;'><strong>"+j+"</strong></a></li>";
				}else{
					aux = aux + "<li><a href='?pag="+j+"'>"+j+"</a></li>";
				}
			}
			
			$('#paginacao').html(aux);
		});
	</script>

Fiquei tão feliz com o que eu fiz. Uma vitória para a minha pessoa.

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