PHP

Em 04/12/2014 às 14:12h por Leonardo

Paginação com Jquery

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... =)

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

Já temos 2 comentário(s). DEIXE O SEU :)

Rogerio Silva

Não consigo conectar ao banco de dados ... para estudar em cima do exemplo

Error!: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO)

★★★☆☆DIA 22.06.19 15h361 GOSTEI :)RESPONDER

Marcos Martins

Esse erro Access denied for user 'root'@'localhost' é porque você deve setar seu usuário e senha corretamente no seguinte parametro:

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

★★★★★DIA 29.06.19 13h570 GOSTEI :)RESPONDER

N/A