Paginação com Ajax em Codeigniter

Como realizar paginação de resultados em PHP e Ajax mediante o framework Codeigniter, para navegar sem recarregar a página inteira.

Por Heisler Palma- Tradução CRV


Publicado em: 10/12/12
Valorize este artigo:
A paginação de resultados em informática é mais velha que aquele que escreve este artigo. No futuro certamente se desenvolverão novas formas de paginar, embora atualmente Codeigniter ofereça a biblioteca pagination. O único problema é que os links que permitem navegar de uma página a outra não são atraentes.

Realmente as rotas das distintas páginas de resultados são corretas, que têm padrões de URL como controlador/1 , controlador/2 . No entanto é desejável uma melhor experiência de usuário e com Ajax podemos melhorar este sistema consideravelmente.

Com a ajuda de Ajax vamos ocultar estes links na rota de navegação e mostrar o conteúdo sem recarregar a página inteira. Talvez a priori possa não parecer tão crucial a paginação mediante Ajax, porém há casos nos que é realmente essencial. No site de Youtube você poderá encontrar uma aplicação onde a paginação por Ajax faz a diferença. Se você está vendo um vídeo e clica nos links de paginação dos comentários, o vídeo não deixará de se reproduzir, enquanto você visualiza os comentários seguintes graças a Ajax.

Nota: Para esta prática assumimos que temos funcionando nosso Codeigniter e inibimos o uso do index.php em nossas rotas de navegação ( $config['index_page'] = ''; no arquivo config e modificado nosso .htaccess ).
Isto está explicado no Manual de Codeigniter de CriarWeb.com e também na própria documentação do framework.

Criamos a tabela com os resultados a paginar

Vamos criar uma tabela chamada mensagens

CREATE TABLE IF NOT EXISTS `mensagens` (
`id` int(11) NOT NULL auto_increment,
`de` varchar(50) collate utf8_bin NOT NULL,
`mensagem` varchar(50) collate utf8_bin NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

Ademais, vamos criar um conjunto de mensagens fictícias:

INSERT INTO `mensagens` (`id`, `de`, `mensagem`) VALUES
(1, 'Meu chefe', 'Termine o que você tem pendente'),
(2, 'Mamãe', 'Filho comunique-se'),
(3, 'Professor', 'amanhã é o exame'),
(4, 'Carlos', 'Me pague'),
(5, 'Namorada ', 'Você já não me trata como antes');
(6, 'Tio', 'Sobrinho quando você vem?'),
(7, 'Avó', 'Querido neto fiz um suéter para você'),
(8, 'Irmão', 'onde você jogou meu tablet pc?');

Modelo para o paginador

Para este exemplo usamos como nome de página localhost. No seu caso você só deve substituí-lo pelo nome de sua página.

Assim que tenhamos configurado nossa conexão para a base de dados (em database.php), podemos passar a criar nosso Modelo. Vamos chamá-lo modelo_paginador.php

<?php
class Modelo_paginador extends CI_Model {
   function __construct()
   {
      parent::__construct();
   }

   public function count_mensagens()
   {
      return $this->db->count_all_results('mensagens');
   }

   public function list_mensagens($limit, $offset)
   {
      $this->db->limit($limit, $offset);
      $query = $this->db->get('mensagens');
      return $query->result();
   }
}

Controlador

A seguir criamos nosso controlador, assumindo que usamos como nome "Welcome".

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {
   function __construct()
   {
      parent::__construct();
      $this->db = $this->load->database('default', TRUE);
      $this->load->library('pagination');
      $this->load->model('modelo_paginador', 'modelo');
      $this->load->helper(array('url'));
   }

   public function index($offset='')
   {
      $this->load->view('vista_mensagens'); // so carregaremos a visao
   }

   public function lista($offset='')
   {
      $limit = 2;
      $total = $this->modelo->count_mensagens();
      $data['mensagens'] = $this->modelo->list_mensagens($limit, $offset);
      $config['base_url'] = base_url().'welcome/lista/';
      $config['total_rows'] = $total;
      $config['per_page'] = $limit;
      $config['uri_segment'] = '3';
      $this->pagination->initialize($config);
      $data['pag_links'] = $this->pagination->create_links();
      $data['title'] = 'Pagination';
      $this->load->view('lista_vista', $data);
   }
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */

Visões para o exemplo de paginação

IMAGEN Vemos que na função index carregamos uma visão chamada 'vista_mensagens'. Por outra parte, na função 'lista' temos o carregamento para a visão 'lista_vista'.

Para continuar vamos criar estas visões e também explicá-las um pouco, já que o assunto sai do tratado no manual de Codeigniter:

Comecemos com vista_mensagens.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <meta name="author" content="Heislersin" />
<script src="http://code.jquery.com/jquery-1.7.js"></script> <script type="text/javascript">
   $(document).ready(function(){
      $("#container").load("/welcome/pronta");
      $(document).on("click", "#pagination-digg li a", function(e){
          e.preventDefault();
         var href = $(this).attr("href");
         $("#container").load(href);
      });
   });
</script>
<style type="text/css">
<!--
/* == Pagination === */
ul{border:0; margin:0; padding:0;}

#pagination-digg li{
   border:0; margin:0; padding:0;
IMAGEM    font-size:11px;
   list-style:none;
   margin-right:2px;
}
#pagination-digg a{
   border:solid 1px #c6baa4;
   margin-right:2px;
}
#pagination-digg .previous-off, #pagination-digg .next-off {
   border:solid 1px #c6baa4;
   color:#222222;
   display:block;
   float:left;
   font-weight:bold;
   margin-right:2px;
   padding:3px 4px;
}
#pagination-digg .next a, #pagination-digg .previous a {
   font-weight:bold;
}
#pagination-digg .active{
   background:#c6baa4;
   color:#FFFFFF;
   font-weight:bold;
   display:block;
   float:left;
   padding:4px 6px;
}
#pagination-digg a:link, #pagination-digg a:visited {
   color:#222222;
   display:block;
   float:left;
   padding:3px 6px;
   text-decoration:none;
}
#pagination-digg a:hover{
   border:solid 1px #222222
}
-->
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>

A visão 'lista_vista.php' só terá este conteúdo:

<ul class="nav" id="nav1">
<?php
foreach($mensagens as $p){
?>
<li><?=$p->de;?>: <?=$p->mensagem;?></li><?php
}
?>
</ul>
<ul id="pagination-digg">
<?=$pag_links;?>
</ul>

Este código fonte tem alguns detalhes que são importantes para que funcione perfeitamente em seu projeto:

Para começar, a linha onde incluímos o script "http://code.jquery.com/jquery-1.7.js" deverá ser substituída pela rota do arquivo jQuery usado no seu projeto, embora seja bom usar o CDN de jQuery poderia deixar essa URL do script. Se você quiser alojá-lo em seu servidor, tenha em conta colocar o arquivo em um diretório, por exemplo "js", ao qual você tem de dar acesso no arquivo .htaccess.

Nota: É importante assinalar que este script Javascript baseado em jQuery utiliza o método on(). Esse método se utiliza para atribuir eventos a elementos do documento HTML, ou ao próprio documento como fazemos no código, e só está disponível a partir da versão 1.7 de jQuery. Por isso, para que funcione, certifique-se de que está utilizando uma versão de jQuery 1.7 ou superior. No exemplo que tínhamos antes neste mesmo artigo utilizávamos o método live() para atribuir os eventos, mas consome bastante mais recursos porque a chamada completa é feita ao DOM. Algo que foi consertado com ON.

Também há uma série de detalhes mais relacionados com a programação em Javascript/jQuery do que com o próprio Codeigniter ou PHP, já que utilizamos essa linguagem e o popular framework para realizar as conexões com Ajax.

Em concreto devemos prestar atenção à chamada ao método load() de jQuery. Com a linha $("#container").load("/welcome/lista"); estamos carregando o conteúdo da paginação em um DIV chamado 'container'.

Igualmente, podemos ver nas linhas seguintes o uso do método live(), que faz a magia de transformar o evento click, de um link normal de paginação, em um link Ajax:

$(document).on("click", "#pagination-digg li a", function(e){
   e.preventDefault();
   var href = $(this).attr("href");
   $("#container").load(href); // esta linha carrega o conteúdo
})

Nota: Insistimos em que você deve utilizar jQuery 1.7 ou superior para que o método funcione. Em caso contrário, você pode utilizar o método live() que funciona em versões antigas do framework. Para isso substitua a linha que utiliza o método on() por esta linha de código:

$("#pagination-digg li a").live("click",function(e) {

Por último em nossa pasta application/config criamos um arquivo chamado pagination.php, com o seguinte conteúdo:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

// First Links
$config['first_link'] = 'First';
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';

// Last Links
$config['last_link'] = 'Last';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';

// Next Link
$config['next_link'] = '»';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';

// Previous Link
$config['prev_link'] = '«';
$config['prev_tag_open'] = '<li>';
$config['prev_tag_close'] = '</li>';

// Current Link
$config['cur_tag_open'] = '<li class="active">';
$config['cur_tag_close'] = '</li>';

// Digit Link
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';

/*
IMAGEM $config['full_tag_open'] = '<p>';
$config['full_tag_close'] = '</p>';

// First Links
$config['first_link'] = 'First';
$config['first_tag_open'] = '<div>';
$config['first_tag_close'] = '</div>';

IMAGEM // Last Links
$config['last_link'] = 'Last';
$config['last_tag_open'] = '<div>';
$config['last_tag_close'] = '</div>';

// Next Link
$config['next_link'] = '»';
$config['next_tag_open'] = '<div>';
$config['next_tag_close'] = '</div>';

// Previous Link
$config['prev_link'] = '«';
$config['prev_tag_open'] = '<div>';
$config['prev_tag_close'] = '</div>';

// Current Link
$config['cur_tag_open'] = '<b>';
$config['cur_tag_close'] = '</b>';

// Digit Link
$config['num_tag_open'] = '<div>';
$config['num_tag_close'] = '</div>';
*/

/* End of file pagination.php */
/* Location: ./system/application/config/pagination.php */

Este último é de valor estético para os links de paginação

Ao clicar nos links o conteúdo carregará essa página de resultados sem recarregar completamente a página, com o que teremos conseguido o objetivo de usar Ajax no nosso site.

Isso é tudo! Espero que qualquer pessoa possa aproveitar estas notas para melhorar, mediante Ajax, a experiência de usuário nos resultados que são mostrados com paginação.

O link para download dos exemplos pode ser visto: http://freakshare.com/files/1c6hruc7/pagination_codeigniter_ajax1.01.rar.html






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato