Tutorial: Paginação em ajax, utilizando a classe Paging e o plugin Jquery Table Sorter

Como sei que paginação em php é (quase)sempre um problema, resolvi criar uma classe para fazer esse trabalho por mim de uma maneira bem simples e escalável, é a classe Paging, que já foi apresentada anteriormente nos posts: Paginação simples e rápida em PHP utilizando a classe Paging e Tutorial: Utilizando a classe Paging para criar uma paginação simples e rápida.

Na versão em que ela se encontra, os únicos dados que conseguimos paginar são resultados tabelados, ou seja gerar um grid de dados com paginação, mas a idéia é futuramente poder paginar vários tipos de dados, como conteúdo html e imagens, porém, como falta-me tempo não consegui implementar métodos para isso, se você quiser contribuir fique a vontade. Deixando o papo de lado, vamos a solução.

Criando paginação utilizando ajax

Arquivos necessários

Para este tutorial iremos utilizar a biblioteca Jquery e o plugin Jquery Table Sorter. Ambos já estão inseridos no arquivo compactado disponível para download abaixo, juntamente com a classe Paging e os demais arquivos necessários para criar a paginação em ajax.

Download: Tutorial Paginação em Ajax com Jquery Table Sorter

Entendendo os arquivos

/css

Neste diretório você irá encontrar duas folhas de estilos, uma utilizada simplesmente para estilizar o arquivo index.html e a outra é a folha de estilização padrão baixada juntamente com o plugin Jquery Table Sorter.

/img

Neste diretório são encontradas apenas imagens utilizadas no plugin Jquery Table Sorter.

/lib

Aqui você encontrará dois subdiretórios: /js e /php, neles você encontrará o a biblioteca Jquery e o plugin Jquery Table Sorter, além da classe de paginação Paging e a classe Connection, utilizada pela classe Paging para fazer uma conexão com um banco de dados. Caso você tenha dúvidas de como implementar esta conexão de uma olhada neste tutorial. Você não vai precisar mexer em nada nestes arquivos, a não ser que queira inserir novos métodos.

produtos.sql

Utilizamos este sql apenas para este exemplo, mas você pode facilmente configurar nossa solução para a tabela que você quiser.

paging.js

Este arquivo é quem faz o trabalho de criar as chamadas em ajax, para fazermos uma paginação sem recarga de página, a não ser que você queira implementar alguma nova funcionalidade, não é preciso mudar nada nele.

index.php

Neste documento encontramos a marcação necessária para apresentarmos os elementos básicos de nossos dados paginados:

1. Uma div para procurarmos registros (search)
2. Uma div que irá mostrar os registros encontrados (grid)
3. Uma ou mais divs para mostrar os controles da paginação (controls)
4. As chamadas a estilos e scripts necessários para fazer o "show" acontecer.

No arquivo que você for implementar esta solução, você não precisa nomear os ids/classes das divs exatamente como neste exemplo (grid, controls e search), fique livre para nomeá-los como achar melhor.

Criando paginação em ajax configurando apenas dois arquivos

grid.php

Este é um dos dois arquivos que você precisará alterar para fazer a mágica acontecer, são apenas 6 linhas que teremos que alterar (em negrito):

require_once('lib/php/paging.class.php');
$paging = new Paging();
$searchfor = isset($_GET['searchfor']) ? $_GET['searchfor'] : '';
$paging->table('produtos');
$paging->where('id = "'.$searchfor.'" OR nome LIKE "%'.$searchfor.'%" OR tipo LIKE "%'.$searchfor.'%"');
$paging->labels('ID,Nome,Tipo');
$paging->fields('id,nome,tipo');
$paging->cols_width('10,100,40');
$paging->rowsperpage(10);
$paging->page(isset($_GET['p']) ? $_GET['p'] : 1);

if($_GET['load'] == 'controls'){

$paging->show_controls();

}else{

$paging->show_table();

}

1. require_once('lib/php/paging.class.php'); - altere para o diretório onde você irá armazenar as classes paging.class.php e connection.class.php
2. $paging->table('produtos'); - informe o nome da tabela que contém os dados que deverão ser paginados
3. $paging->where... - caso você opte por inserir a função search ao grid, defina aqui quais campos e condições para que os dados sejam mostrados, a sintaxe vai ser sempre similar a mostra neste exemplo, basicamente serão apenas os campos buscados que irão mudar.
4. $paging->labels('ID,Nome,Tipo'); - Aqui serão definidos os cabeçalhos do grid
5. $paging->fields('id,nome,tipo'); - Aqui você deve informar quais as colunas da tabela, que você deseja mostrar
6. $paging->cols_width('10,100,40'); - Esta linha é opcional, mas caso você venha a ter problemas com os tamanhos (width) das colunas do grid, você pode ajustá-las aqui, basta colocar os tamanhos separados por vírgula para as respectivas colunas.

Você pode configurar ainda mais sua paginação, confira todos os métodos disponíveis para a classe acessando o post: Paginação simples e rápida em PHP utilizando a classe Paging.

param.js

Este é o segundo e último arquivo que você terá que modificar, não tem muito o que explicar nele, pois esta tudo devidamente comentado, de qualquer forma vamos mostrar aqui apenas para você ver como é fácil:

Configurando os controles da paginação

1. var controlsdivclass = '.paging'; - Informe aqui em quais divs você deseja mostrar os controles da paginação, você pode ter os mesmos controles em diferentes divs;
2. var controlsscript = 'grid.php'; - Informe aqui qual arquivo irá processar os registros e criar os controles;
3. var controlsclass = 'tablesorter'; - Classe utilizada para estilizar os controles

Configurando o grid

1. var griddivid = '#grid'; - Informe a div onde será mostrado o grid
2. var gridscript = 'grid.php'; -Informe aqui qual arquivo irá processar os registros e criar o grid;
3. var controlsclass = 'tablesorter'; - Classe utilizada para estilizar o grid
4. var gridheaders = {}; - objeto utilizado para passar instruções ao plugin Jquery Table Sorter, parametrizando os cabeçalhos da tabela individualmente, algo do tipo: 0:{sorter:false}, 1:{sorter:false}...

Outros parâmetros

1. var consolediv = '#console'; - Div utilizada para mostrar mensagens de status da execução
2. var loadmsg = 'Carregando...aguarde'; - mensagem ou caminho para um gif animado para ser mostrado enquanto os dados estão sendo carregados
3. var searchid = '#searching'; - Id do input (text) que será utilizado para fazer o search dentro do grid.

Configurando corretamente, você terá um resultado semelhante ao abaixo. Tente fazer isso para suas tabelas, você verá como ficará fácil implementar paginação no seu site ou sistema.

Resultado final da paginação com classe Paging + Ajax (Jquery e Jquery Table Sorter)

Se você é um usuário já experiente em Jquery, deve estar se perguntando porque eu não criei este grid como um plugin jquery, já que seria bem mais fácil de configurá-lo ao invés de utilizar um arquivo para configuração, a verdade é que eu nunca criei um plugin jquery, pois até então nunca tive a necessidade, a idéia é que eu transforme este grid em um plugin mais tarde, assim que eu tiver tempo para isso, se você já tem experiência no assunto, gostou da solução, tiver idéias ou quiser contribuir, fique a vontade, eu adoraria transformar isto em um plugin, principalmente em um gratuito, já que o plugin para criar grids com jQuery oficial (jqGrid) que existe hoje é uma solução paga.

É isso então, espero que tenham apreciado, deixem seus comentários, sugestões ou dúvidas que terei prazer em atendê-los. Até a próxima!