paginação
Paginação em listas HTML com jQuery Quick Pagination
Em 20, jan 2012 | Sem Comentários | Em Blog, HTML | Por Allison
Fonte: KaduNew
Com o plugin Quick Pagination você é capaz de criar paginações rapidamente em suas listas. Ótimo para converter listas extensas em listas menores. O plugin ainda permite ajustar alguns dos seus parâmetros adicionais. Você pode especificar a navegação na parte superior, inferior ou ambos, pode também especificar o número de itens a serem exibidos.
Lembrando que para usar esse plugin você deve fazer o download da biblioteca jquery, ou carregar o arquivo a partir do site do Google.
Como usar jQuery Quick Pagination
Exemplo de marcação HTML
<ul class="pagination1">
<li>1 - Item 1 de 25</li>
<li>2 - Item 2 de 25</li>
<li>3 - Item 3 de 25</li>
<li>4 - Item 4 de 25</li>
<li>5 - Item 5 de 25</li>
<li>6 - Item 6 de 25</li>
....
Criando três exemplo de paginação
<script type="text/javascript">
$(document).ready(function() {
$("ul.pagination1").quickPagination();
$("ul.pagination2").quickPagination({pagerLocation:"both"});
$("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"});
});
</script>
Primeiro exemplo
Opção padrão mostrando 10 itens da lista e navegação na parte inferior.
$(”ul.pagination1″).quickPagination();
Segundo exemplo
Mostrando 10 itens da lista e navegação na parte superior e inferior.
$(”ul.pagination2″).quickPagination({pagerLocation:”both”});
Terceiro Exemplo
Especificados 3 itens na lista e navegação na parte superior e inferior.
$(”ul.pagination3″).quickPagination({pagerLocation:”both”,pageSize:”3″});
Referências:
Paginação com jQuery
Em 10, jan 2012 | Sem Comentários | Em Blog, CSS, PHP | Por Allison
Vou tentar explicar como fazer uma paginação com jQuery, ou seja, sem precisar dar o tal do refresh no navegador. Vamos usar um pouco de um outro tutorial que mostrei aqui, que é sobre conectar-se ao banco usando PHP. O resto é um pouco de CSS, algumas consultas ao banco com PHP e nada mais.
Vamos fazer um exemplo de uma listagem de feed de noticias, ou seja, listar todas as noticias cadastrada no banco.
Criando a tabela:
CREATE TABLE IF NOT EXISTS `noticias` ( `id` int(11) NOT NULL AUTO_INCREMENT, `noticias` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
Vamos lá ..
Primeiro vamos criar o arquivo index.php
<!DOCTYPE HTML>
<?php
// Contem as informações para se conectar ao banco
include ('conectar_banco.php');
// Chamar a classe para conectar o banco
$sql = new conectar_banco();
// Conecta-se ao banco de dados usando os valores padrões
$sql->conecta();
?>
<html>
<head>
<meta charset="utf-8">
<title>Paginação com jQuery</title>
<link rel="stylesheet" type="text/css" media="screen" href="css.css">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="paginacao.js"></script>
</head>
<body>
<?php
$por_pagina = 7; // NUMERO DE VEZES QUE VAI APARECER ANTES DE CRIAR OUTRA PAGINA
// Define e executa uma query SQL
$busca = "SELECT * FROM noticias ";
$sql->consulta($busca);
$contar = $sql->contar();
$paginas = ceil($contar/$por_pagina)
?>
<div id="conteudo">
<div>
<label><img src="loader.gif" alt=""></label>
</div>
<div id="resultado"></div>
</div>
<div id="botao" align="center">
<ul>
<?php
// Mostrar os links da paginação.
for($i=1; $i<=$paginas; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</div>
</body>
</html>
Agora precisamos do arquivo paginacao.js para fazer a mágica acontecer
$(document).ready(function(){
function showLoader(){
$('.fundo_pag').fadeIn(200);
}
function hideLoader(){
$('.fundo_pag').fadeOut(200);
};
$("#botao li").click(function(){
showLoader();
$("#botao li").css({'background-color' : ''});
$(this).css({'background-color' : '#D8543A'});
$("#resultado").load("informacao-paginacao.php?page=" + this.id, hideLoader);
return false;
});
$("#1").css({'background-color' : '#D8543A'});
showLoader();
$("#resultado").load("informacao-paginacao.php?page=1", hideLoader);
});
E para que seja feita novas consultas quando solicitado o arquivo paginacao.js, vamos precisar fazer uma nova consulta, com o arquivo informacao-paginacao.php
<?php
include ('conectar_banco.php');
// Chamar a classe para conectar o banco
$sql = new conectar_banco();
// Conecta-se ao banco de dados usando os valores padrões
$sql->conecta();
// Quantidade por paginda
$por_pagina = 3;
// Pegar qual é a numeração da pagina atual
$pagina = $_REQUEST['page'];
$inicio = ($pagina-1)*$por_pagina;
$buscar = "SELECT * FROM noticias ORDER BY id LIMIT $inicio,$por_pagina";
$sql->consulta($buscar);
while ($paginacao = $sql->resultado())
{
?> <div><?php echo $paginacao['noticias'];?></div><?php
}
?>
E para deixar tudo muito bonito, vamos usar um css.
*{
margin:0px;
padding:0px;
font-family:Tahoma, Geneva, sans-serif
font-size:0.75em;
}
#conteudo {
min-height:455px;
padding:12px;
margin:0 auto;
text-decoration: none;
width: 700px;
}
#conteudo .separacao{
color:#000066;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding:5px 5px 12px 5px;
border-bottom:solid #D8543A 3px;
text-align:justify;
margin-bottom:11px;
}
.fundo_pag{
display: none;
font-size: 13px;
font-weight: bold;
height:160px;
position: absolute;
padding-top:140px;
text-align: center;
opacity:0.5;filter: alpha(opacity=50) ;
text-decoration: none;
width: 700px;
}
.fundo_pag{
color:#FFFFFF;
text-shadow: #fff 0px 0px 20px;
}
.fundo_pag label{
border:solid #66FF00 1px;
}
#botao ul{ width: 700px; padding:0px; margin:8px;}
#botao ul li {
-moz-border-radius: 3px 3px 3px 3px;
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
float: left;
font-family: helvetica,arial,sans-serif;
font-size: 13px;
font-weight: 700;
margin: 0 2px 0px;
padding: 10px 10px;
text-align: center;
text-decoration: none;
text-shadow: none;
list-style-type:none;
width: 30px;cursor:pointer;
}
#botao ul li:hover{background:#D8543A;}
li:hover{ color: #CC0000; cursor: pointer; }
Bom, estou pegando o jeito com esse negocio de tutorial, mas com o tempo vou melhorando, se você quiser fazer o download desse exemplo é só clicar aqui
