Nessa artigo irei mostrar como aplicar a paginação na tabela criada no artigo Listando dados com Ajax usando Prototype e PHP.

Iremos realizar algumas alterações no código escrito no artigo anterior. Vamos alterar os arquivos:
    - Cliente.php
    - Cliente.js
    - Lista.php

REALIZANDO A ALTERAÇÃO DO ARQUIVO CLIENTE.PHP

No arquivo Cliente.php iremos alterar o SQL e incluir algumas variáveis. No MYSQL é usado o comando LIMIT para definir o início e a quantidade de registros por página de listagem. Por exemplo:
    Caso queira que seja listado os primeiros três registros da tabela do banco de dados você defini o comando LIMIT com o início igual a zero e a quantidade de páginas igual a 3, como mostra a linha abaixo.

PHP
SELECT * FROM tbCliente LIMIT 0, 3
 
Para o nosso exemplo iremos incluir as linhas:
// Defini o número de registros  por pagina
$quantPag = 3; 
// Recupera a página
$pagina = $_POST['pagina'];
// Se a página não for definida o valor assumido será 0
if (empty($pagina)) {
	$pagina = 0;
}
// Defini o início da listagem
$inicio = $pagina * $quantPag;
 
www.revistaphp.com.br

No caso do nosso SQL iremos definir o início e quantidade por página do comando LIMIT como também o número total de registros da tabela, isso feito pelo subselect jogando o valor para o campo total.

PHP
$sql = "SELECT *, (SELECT count(*) FROM tbCliente) as total FROM tbCliente WHERE nome LIKE '%" . $_POST['nome'] . "%' LIMIT ".$inicio.", ".$quantPag;
www.revistaphp.com.br

Temos que incluir na criação do XML os valores de TOTAL DE REGISTROS, QUANTIDADE DE REGISTROS POR PÁGINA e a PÁGINA corrente, isso dentro de uma tag nomeada como PAGINAÇÃO.

PHP
$xml.="<paginacao>";
$xml.="<item>".$total ."</item>";
$xml.="<item>".$quantPag."</item>";
$xml.="<item>".$pagina	."</item>";
$xml.="</paginacao>";
www.revistaphp.com.br

Veja abaixo o código completo do arquivo Cliente.php com as alterações.

PHP
<?php
// Importando a classe de conexão
require_once("db/db.php");
 
// Instanciando a classe de conexão
$db = new db();
// Abrindo o banco de dados
$con = $db->open();
 
// Definindo o número de registros  por pagina
$quantPag = 3; 
// Recuperando a página
$pagina = $_POST['pagina'];
// Se a página não for definida o valor assumido será 0
if (empty($pagina)) {
	$pagina = 0;
}
// Definindo o início da listagem
$inicio = $pagina * $quantPag;
 
$sql = "SELECT *, (SELECT count(*) FROM tbCliente) as total FROM tbCliente WHERE nome LIKE '%" . $_POST['nome'] . "%' 	LIMIT ".$inicio.", ".$quantPag;
 
// Executa o sql         
$query = mysql_query($sql);
// Verificando se há registros
if(mysql_num_rows($query)){
 
// Montando o XML com os registros do banco		
header("Content-type: application/xml charset=iso-8859-1");
		$xml="<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>";
 
		// Definindo as colunas da tabela de listagem dos registros
		$xml.="<dados>";
		$xml.=	"<cabecalho>";
		$xml.=		"<coluna>Código 	</coluna>";
		$xml.=		"<coluna>Nome 	</coluna>";
		$xml.=		"<coluna>email 	</coluna>";
		$xml.=	"</cabecalho>";
 
// Montando o corpo da tabela
        		while ($dados = mysql_fetch_array($query)){
			$xml.="<registro>";
			$xml.=	"<item>".$dados['id']."</item>";
			$xml.=	"<item>".$dados['nome']."</item>";
			$xml.=	"<item>".$dados['email']."</item>";
			$xml.="</registro>";
 
// Setando o valor total de registros
$total = $dados['total'];
		}	
 
// Setando os valores necessários para a paginação
		$xml.="<paginacao>";
		$xml.="<item>".$total	 ."</item>";
		$xml.="<item>".$quantPag."</item>";
		$xml.="<item>".$pagina."</item>";
		$xml.="</paginacao>";		
 
		// Fim da tabela
		$xml.="</dados>";
}else{
	header("Content-type: application/xml");
	$xml="<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>";
}
// Retornando o XML com os registros do banco
echo $xml;
// Fechando o banco
$db->close($con);
exit();
 
?>
www.revistaphp.com.br

REALIZANDO A ALTERAÇÃO DO ARQUIVO CLIENTE.JS

No arquivo Cliente.js iremos alterar as funções CreatGrid() e escreve(). Iremos fazer a inclusão da função paginação(), onde será responsável pela criação da paginação.

A alteração da função CreatGrid() é feita pela inclusão do parâmetro PAGINA.

JS
function createGrid(nome, pagina)
{
   if(nome == null)
	   	nome = "";
 
   if(pagina == null)
	   	pagina = "";	  
 
	var url = 'cliente.php';
	var parametros = 'nome='+nome+'&pagina='+pagina;
	var myAjax = new Ajax.Request( url, { method: 'post', parameters: parametros, onLoading: carregando, onComplete: imprime}); 	  
}
www.revistaphp.com.br

A alteração da função escreve() é feita pela inclusão dos dados da tag PAGINACAO vinda do XML, onde será passado como parâmetro para a função paginação() os valores de TOTAL DE REGISTROS, QUANTIDADE DE REGISTROS POR PÁGINA e a PÁGINA CORRENTE.

JS
var pagin = xmldoc.getElementsByTagName('paginacao');
for(i=0;i<pagin.length;i++){
	var itensT = pagin[i].getElementsByTagName('item');
            var totalRegistros 	= itensT[0].firstChild.data;
	var quantPag 		= itensT[1].firstChild.data;
	var pagina		= itensT[2].firstChild.data;
	tabela+= paginacao(totalRegistros, quantPag, pagina);
}
www.revistaphp.com.br

A última alteração do arquivo Cliente.js e a inclusão da função paginação().

JS
function paginacao(totalRegistros, quantPag, pagina){
	var totalPaginas = eval(totalRegistros) / eval(quantPag);	
	var tabela = "";
	tabela = "<div align='right'>";
 
	// Se a página corrente for maior que 0 é mostrado a imagem de VOLTAR
	if(pagina > 0){
		var voltar = eval(pagina) - 1;
		tabela+="<a href='#' onClick='createGrid(\"\", " + voltar + ")'><img src='voltar.gif' border='0'></a>&nbsp;";
	}	
 
// Mostrando os números das páginas
	for(u=0;u<totalPaginas;u++)
	{
	  if(u == pagina)
		tabela+="<strong>(&nbsp;";
	 	tabela+="<a href='javascript:createGrid(\"\", " + u + ");' onClick='createGrid(\"\", " + u + ")'>" + (eval(u)+1) + "</a>&nbsp;";
	  if(u == pagina)
		tabela+=")</strong>";			  
	}
 
	// Se a página corrente for menor que total de páginas menos o valor 1 é mostrado a imagem de AVANÇAR
	if(pagina < (eval(totalPaginas - 1))){
		var avancar = eval(pagina) + 1;
		tabela+="<a href='#' onClick='createGrid(\"\", " + avancar + ")'><img src='avancar.gif' border='0'></a>&nbsp;";
	}
 
	tabela+="Total de Registros: " + totalRegistros;
	tabela+="</div>";
 
	return tabela;
}
www.revistaphp.com.br

Veja abaixo o código completo do arquivo Cliente.js com as alterações.

JS
// Função de crição da tabela de listagem de clientes
function createGrid(nome, pagina)
{
   if(nome == null)
	   	nome = "";
 
   if(pagina == null)
	   	pagina = "";	  
 
	var url = 'Cliente.php';
	var parametros = 'nome='+nome+'&pagina='+pagina;
	var myAjax = new Ajax.Request( url, { method: 'post', parameters: parametros, onLoading: carregando, onComplete: escreve}); 	  
}
// Função de pesquisa
function pesquisar() {
	// Passando como parâmetro o valor do campo pesq_nome do formulário de pesquisa
createGrid( $("pesq_nome").value );
}
// Função de exibição de imagem de processamento
function carregando()
{
	$("msg").style.display="block";
	$("msg").innerHTML="<img src='ajax-loader.gif'>";
}
// Escreve a tabela de listagem de clientes
function escreve(request)
{
	$("msg").style.display="none";
 
	var xmldoc=request.responseXML;
	var cabecalho = xmldoc.getElementsByTagName('cabecalho')[0];
 
	if(cabecalho!=null) {
 
		var coluna = cabecalho.getElementsByTagName('coluna');
		var tabela="<table width='100%' border='0'><tr bgcolor='#666666'>"
 
		//cabecalho da tabela
		for(i=0;i<coluna.length;i++){
			tabela+="<td><b><font color='#FFFFFF'>"+coluna[i].firstChild.data+"</font></b></td>";
		}
		tabela+="</tr>"
		//corpo da tabela
		var registros = xmldoc.getElementsByTagName('registro');
 
		for(i=0;i<registros.length;i++){
			var itens = registros[i].getElementsByTagName('item'); 
			tabela+="<tr id=linha"+i+" bgcolor='#DDDDDD'>";
			for(j=0;j<itens.length;j++){
				if(itens[j].firstChild==null){
					 tabela+="<td></td>";
				}else{
				   tabela+="<td>" + itens[j].firstChild.data + "</td>";
				}
			}
			tabela+="</tr>";
		}
		tabela+="</table>";
 
var pagin = xmldoc.getElementsByTagName('paginacao');
for(i=0;i<pagin.length;i++){
	var itensT = pagin[i].getElementsByTagName('item');
             var totalRegistros 	= itensT[0].firstChild.data;
	var quantPag 		= itensT[1].firstChild.data;
	var pagina		= itensT[2].firstChild.data;
	tabela+= paginacao(totalRegistros, quantPag, pagina);
}
 
 
		$("listagem").innerHTML=tabela;
		tabela=null;
		}else{
			$("listagem").innerHTML="<div align='center'>Não há registros...</div>";
		}
}
 
function paginacao(totalRegistros, quantPag, pagina){
	var totalPaginas = eval(totalRegistros) / eval(quantPag);	
	var tabela = "";
	tabela = "<div align='right'>";
 
	if(pagina > 0){
		var voltar = eval(pagina) - 1;
		tabela+="<a href='#' onClick='createGrid(\"\", " + voltar + ")'><img src='voltar.gif' border='0'></a>&nbsp;";
	}	
 
	for(u=0;u<totalPaginas;u++)
	{
	  if(u == pagina)
		tabela+="<strong>(&nbsp;";
	 	tabela+="<a href='javascript:createGrid(\"\", " + u + ");' onClick='createGrid(\"\", " + u + ")'>" + (eval(u)+1) + "</a>&nbsp;";
	  if(u == pagina)
		tabela+=")</strong>";			  
	}
 
	if(pagina < (eval(totalPaginas - 1))){
		var avancar = eval(pagina) + 1;
		tabela+="<a href='#' onClick='createGrid(\"\", " + avancar + ")'><img src='avancar.gif' border='0'></a>&nbsp;";
	}
 
	tabela+="Total de Registros: " + totalRegistros;
	tabela+="</div>";
 
	return tabela;
}
www.revistaphp.com.br

REALIZANDO A ALTERAÇÃO DO ARQUIVO LISTA.PHP

Para finalizar iremos realizar a alteração do código do arquivo Lista.php que consiste na alteração da função createGrid(), onde passaremos como parâmetros valores padrões. Procure pela linha onde possui a tag BODY e faça a inclusão dos parâmetros: “” e '0', como mostra a linha abaixo.

HTML
<body onLoad="javascript:createGrid('','0');">
www.revistaphp.com.br

Veja abaixo o código completo do arquivo Lista.php com as alterações.

PHP
<html>
<head>
<title>Listagem de Clientes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Importando a biblioteca javascript de clientes -->
<script language="javascript" src="Cliente.js"></script>
<!-- Importando a biblioteca javascript Prototype -->
<script language="javascript" src="prototype.js"></script>
</head>
 
<!-- Na inicialização da página é executada a função createGrid. Essa função cria a tabela de listagem com os dados do banco -->
<body onLoad="javascript:createGrid(‘’, ‘0’);">
<!-- Imagem de animação do processamento -->
<div id='msg' style='display:none; position:absolute; left: 274px; top: 13px; width: 109px; height: 27px;'></div>
<table width="100%"  border="0">
  <tr>
    <td>
	<!-- Formulário de pesquisa -->
<form action="" method="post">
		Nome: <input type="text" id="pesq_nome" onKeyUp=”javascript: pesquisar (this.value);”>
		<input type="button" name="Button" value="Buscar" onClick="javascript:pesquisar();">
	</form>
    </td>
  </tr>
  <tr>
    <td>
	<!-- Camada onde será mostrada a tabela de listagem com a paginação -->
<div id="listagem"></div>
    </td>
  </tr>
</table>
</body>
</html>
www.revistaphp.com.br

Acesse os endereços abaixo para baixar as imagens de AVANÇAR e VOLTAR. Salve as imagens na mesma pasta dos arquivos.
    - http://www.fortalveiculos.com.br/avancar.gif
    - http://www.fortalveiculos.com.br/voltar.gif

Pronto, finalizamos. Acesse o endereço local, http://localhost/cliente/Lista.php, pelo browser e veja o resultado.


Visualize a demonstração no endereço:
http://www.fortalveiculos.com.br/Cliente/Lista.php

Abraços, e até o próximo artigo.