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.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:- Uma div para procurarmos registros (search)
- Uma div que irá mostrar os registros encontrados (grid)
- Uma ou mais divs para mostrar os controles da paginação (controls)
- 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();
}- 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
- $paging->table('produtos'); - informe o nome da tabela que contém os dados que deverão ser paginados
- $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.
- $paging->labels('ID,Nome,Tipo'); - Aqui serão definidos os cabeçalhos do grid
- $paging->fields('id,nome,tipo'); - Aqui você deve informar quais as colunas da tabela, que você deseja mostrar
- $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.
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
- 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;
- var controlsscript = 'grid.php'; - Informe aqui qual arquivo irá processar os registros e criar os controles;
- var controlsclass = 'tablesorter'; - Classe utilizada para estilizar os controles
Configurando o grid
- var griddivid = '#grid'; - Informe a div onde será mostrado o grid
- var gridscript = 'grid.php'; -Informe aqui qual arquivo irá processar os registros e criar o grid;
- var controlsclass = 'tablesorter'; - Classe utilizada para estilizar o grid
- 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
- var consolediv = '#console'; - Div utilizada para mostrar mensagens de status da execução
- var loadmsg = 'Carregando...aguarde'; - mensagem ou caminho para um gif animado para ser mostrado enquanto os dados estão sendo carregados
- var searchid = '#searching'; - Id do input (text) que será utilizado para fazer o search dentro do grid.
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!
