PHP

Em por

No artigo de hoje mostrarei a vocês como criar uma paginação de resultados com Banco de Dados, PHP, Ajax e Jquery com botões de controle de navegação.

Bem inicialmente criamos nosso Banco de dados, caso ainda não saiba veja nosso atigo sobre Como Criar um Banco de Dados.

CREATE DATABASE paginacao;
USE cliente;
--
-- Estrutura da tabela `cliente`
--

CREATE TABLE IF NOT EXISTS `cliente` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nome` varchar(200) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=19 ;

--
-- Extraindo dados da tabela `cliente`
--

INSERT INTO `cliente` (`id`, `nome`) VALUES
(1, 'Leonardo Martins'),
(2, 'Jose bueno'),
(3, 'Edivaldo silva'),
(4, 'Ana Carolina'),
(5, 'Rodrigo Mendes'),
(6, 'Junior Pinto'),
(7, 'Maurcio Mendes'),
(8, 'Marília Silva'),
(9, 'Jeferson Rodrigues'),
(10, 'Cristina Santoro'),
(11, 'Everton Jose'),
(12, 'Joao Paulo'),
(13, 'Victor Duarte'),
(14, 'Josefina Ferraz'),
(15, 'Cesar Augusto'),
(16, 'Marcos Eduardo'),
(17, 'Maria Aparecida'),
(18, 'José Rodrigues');

Criado nosso banco de dados para exemplo vamos criar nossa classe Conexao.class.php, caso não saiba como criar classe com php veja nosso artigo sobre Criar Classe com PHP.

<?php    
	class Conexao {
		private $data = array();
		//variavel da classe Base
		protected $pdo = null;
		
		public function __set($name, $value){
			$this->data[$name] = $value;
		}

		public function __get($name){
			if (array_key_exists($name, $this->data)) {
				return $this->data[$name];
			}

			$trace = debug_backtrace();
			trigger_error(
				'Undefined property via __get(): ' . $name .
				' in ' . $trace[0]['file'] .
				' on line ' . $trace[0]['line'],
				E_USER_NOTICE);
			return null;
		}
		//método que retorna a variável $pdo
		public function getPdo() {
			return $this->pdo;
		}

		//método construtor da classe
		function __construct($pdo = null) {
			$this->pdo = $pdo;
			if ($this->pdo == null)
				$this->conectar();
		}

		//método que conecta com o banco de dados
		public function conectar() {
			try{
				$this->pdo = new PDO("mysql:host=localhost;dbname=paginacao",
								"root",
								"",
								array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
			}catch (PDOException $e) {
				print "Error!: " . $e->getMessage() ."<br/>";
				die();
			}
		}

		//método que desconecta
		public function desconectar() {
			$this->pdo = null;
		}
		
		public function select($sql){
			$stmt = $this->pdo->prepare($sql);
			$stmt->execute();
			return $stmt->fetchAll(PDO::FETCH_ASSOC);
		}
}
?>

Feito nossa classe de conexão, vamos criar nosso pagina index.php, na qual sera responsável por mostrar os dados na tela.

Nossa pagina ficará assim:

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
     <title>Pagina&ccedil;&atilde;o com Jquery</title>
      <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="loading"></div>
        <div id="container">
            <div class="data"></div>
            <div class="pagination"></div>
       </div>
</body>
</html>

Dentro das tagas HEAD vamos add nosso arquivo Jquery e nosso JavaScript assim:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
            $(document).ready(function(){
				//função para mostrar o loading
                function loading_show(){
                    $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
                }
				//função para esconder o loading
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                } 
			
                function loadData(page){
                    loading_show();                    
                    $.ajax
                    ({
                        type: "POST",
                        url: "load_data.php", //pagina para onde vamos enviar os dados
                        data: "page="+page,
                        success: function(msg)
                        {
                            $("#container").ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#container").html(msg);
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
                $('#container .pagination li.active').live('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);
                });  
				
                $('#go_btn').live('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }   
                });
            });
        </script>

Criado nossa página index, vamos criar nossa página load-data.php responsável por fazer a busca no Banco de Dados e retornar a busca para nossa página principal para ser exibido dinamicamente.

<?php
//recebemos o parametro vindo do ajax
if($_POST['page'])
{
//configurações da pagina
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 6;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
	
	//inclui o arquivo de conexão
	include_once('class/Conexao.class.php');
	//instanciamos nossa classe
	$pdo = new Conexao(); 
	//executamos nossa query
	$resultado = $pdo->select("SELECT id,nome from cliente LIMIT $start, $per_page");
	//criamos uma var para mosntar o html a ser exibido 	
	$msg = "";
	//resgatamos os valores do select e montamos os dados no html 
	if(count($resultado)){
		foreach ($resultado as $res) {

			$htmlmsg=htmlentities($res['nome']);
			$msg .= "<li><b>" . $res['id'] . "</b> " . $htmlmsg . "</li>";
		}
	}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data

/* --------------------------------------------- */
	//contamos quantos resgistros possui para controle dos botões
	$resultado2 = $pdo->select("SELECT COUNT(*) AS count FROM cliente");
	if(count($resultado2)){
		foreach ($resultado2 as $res2) {
			$count = $res2['count'];
		}
	}
	//desconecta do banco
	$pdo->desconectar();
	$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculando a valores inicial e final para o loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
	$msg .= "<div class='pagination'><ul>";

	// para habilitar o primeiro botão
	if ($first_btn && $cur_page > 1) {
		$msg .= "<li p='1' class='active'>First</li>";
	} else if ($first_btn) {
		$msg .= "<li p='1' class='inactive'>First</li>";
	}

	// Para permitir que o botão anterior
	if ($previous_btn && $cur_page > 1) {
		$pre = $cur_page - 1;
		$msg .= "<li p='$pre' class='active'>Previous</li>";
	} else if ($previous_btn) {
		$msg .= "<li class='inactive'>Previous</li>";
	}
	
	for ($i = $start_loop; $i <= $end_loop; $i++) {

		if ($cur_page == $i)
			$msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
		else
			$msg .= "<li p='$i' class='active'>{$i}</li>";
	}

	// Para permitir o botão próximo
	if ($next_btn && $cur_page < $no_of_paginations) {
		$nex = $cur_page + 1;
		$msg .= "<li p='$nex' class='active'>Next</li>";
	} else if ($next_btn) {
		$msg .= "<li class='inactive'>Next</li>";
	}

	// Para ativar o botão final
	if ($last_btn && $cur_page < $no_of_paginations) {
		$msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
	} else if ($last_btn) {
		$msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
	}
	
	$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
	$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
	$msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
	//retornamos nossa var com nosso html feito
	echo $msg;
}

Prontinho, temos nossa paginação funcionando perfeitamente, e agora você pode adaptar esse exemplo ao seu projeto e implementar de várias maneiras para atender sua necessidade.

Para baixar o exemplo completo clique AQUI...

Dúvidas, críticas ou sugestões comentem abaixo e bons estudos... laugh

Veja Também:

Artigos Relacionados a categoria: PHP

Olá, deixe seu comentário para Paginação com Jquery

Enviando Comentário Fechar :/

...AINDA NÃO VIU NOSSO PORTFÓLIO?

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora