Image Image Image Image Image
Scroll to Top

Topo

paginação

20

jan
2012

Sem Comentários

Em Blog
HTML

Por Allison

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:


Tags | , , , ,

10

jan
2012

Sem Comentários

Em Blog
CSS
PHP

Por Allison

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

Fonte: Renan M. Pimentel/Algoritmizando

Tags | , ,