Paginação com Jquery e PHP

Publicado em por

Esse é o meu primeiro post, venho com ele tentar explicar como podemos fazer paginação utilizando o  Jquery+PHP . O Jquery, para quem não conhece, vem revolucionando a maneira como escrevemos Javascript, tornando mais fácil a vida dos programadores, para quem não conhece e deseja entender o que é, esse site possui um ótimo artigo. Não vou me aprofundar muito na explicação do que é a biblioteca, apenas vou mostrar como fazer a paginação sem a necessidade de um refresh na página.

O paginador que será apresentado utiliza, além do jquery, a linguagem PHP para selecionar as informações do banco de dados e para criar o índice de paginação, o qual mostrará no máximo 5 páginas (primeira, ultima , uma antes e uma depois da atual), como podemos ver no demo.

O código é composto basicamente de 3 páginas, o index.php, o op.php e o indice.php, a seguir serão apresentados seus códigos comentados.

index.php

<?PHP
//conexão com o banco de dados
 
$conn = mysql_connect(“localhost”, ‘root’, ”);
mysql_select_db(‘banco’);
 
//primeiro select com um contador para saber quantos resultados serão exibidos
$result_p = mysql_query(“select count(*) as count FROM uf”);
$row_p = mysql_fetch_array($result_p);
//quantidade de resultados por página
$quant_resul = 5;
//página atual referente a página de index que será a primeira página
$pagina = 1;
 
//calculando quantidade de páginas
$paginas = ceil($row_p[‘count’] / $quant_resul);
 
// segundo select com os valores já limitados pelo limite no sql
$result = mysql_query(“select *FROM uf limit 0 , ” . $quant_resul);
?>
<html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
        <!— Incluindo o script do jquery a página–>
        <script type=’text/javascript’ src=’jquery.js’></script>
 
 
        <!– Função utilizando JQUERY que faz a paginação dos dados,
            Nesta função é enviado, utilizando o médodo post do jquery, três informações a página op.php, são eles
            página que se deseja exibir, quantidade de páginas e quantidade de resultado por página
            no retorno oconteudo da div dados será trocado pelo conteúdo retornado.
        –>
        <script type=”text/javascript”>
                              
            function paginar(pagina,paginas, quant_result ){
                                              
                $(“#dados”).html(“<b><img src=’carregando.gif’ alt=” /></b>”);
                $.post(“op.php”, {pagina:pagina, paginas:paginas, quant_result:quant_result}, function(data){$(“#dados”).html(data);}, “html”) ;
            }
        </script>
 
    </head>
    <body>
        <fieldset style=”padding: 15px;”> <legend>Exemplo de Páginação com Jquery</legend>
            <div id=”dados”>
                <?php
                //incluindo a página de índice ela é responsável por imprimir os valores das páginas e seus link’s.
                include ‘indice.php’;
                ?>
                <table >
                    <thead >
 
                        <tr align=”left”>
                            <th >ID</th>
                            <th>Nome</th>
                            <th>Sigla</th>
 
                            <?PHP
                            ?>
 
                        </tr>
                    </thead>
                    <tbody>
                        <?PHP
                        while ($row = mysql_fetch_array($result)) {
                            echo ‘  <tr align=”left”>
                                <td>’ . $row[‘uf_id’] . ‘</td>
                                <td>’ . $row[‘uf_nome’] . ‘</td>
                                <td>’ . $row[‘uf_sigla’] . ‘</td>
                             
                            </tr>
                       
                  ‘;
                        }
 
                        echo ‘
                            </tbody>
                 
                           
                                         
‘;
                        ?>
 
                </table>
 
            </div>
                                              
        </fieldset>
 
</body>
</html>
 
<?php ?>
 
 op.php
 
<?php
header(“Content-Type: text/html; charset=iso-8859-1”);
 
// recebndo conteudo da página anterior, que vêm através do método post
$pagina = $_POST[‘pagina’];
$quant_resul = $_POST[‘quant_result’];
$paginas = $_POST[‘paginas’];
// calculando onde o limit deve começar no Select
$start = $pagina * $quant_resul;
$pagina++;
 
 
//conexão com o banco de dados
$conn = mysql_connect(“localhost”, ‘root’, ”);
mysql_select_db(‘banco’);
 
 
// select com os limites definidos (inicio e quantidade de resultados)
$result = mysql_query(“SELECT * FROM uf limit ” . $start . ” , ” . $quant_resul);
?>
<!– impresão dos valores que serão trocados dentro da DIV dados–>
<?php
//incluindo a página de índice ela é responsável por imprimir os valores das páginas e seus link’s.
include ‘indice.php’;
?>
<table>
    <thead>
 
        <tr align=”left”>
            <th>ID</th>
            <th>Nome</th>
            <th>Sigla</th>
 
<?PHP ?>
 
        </tr>
    </thead>
    <tbody>
<?PHP
while ($row = mysql_fetch_array($result)) {
    echo ‘  <tr align=”left”>
                                <td>’ . $row[‘uf_id’] . ‘</td>
                                <td>’ . $row[‘uf_nome’] . ‘</td>
                                <td>’ . $row[‘uf_sigla’] . ‘</td>
                               
                            </tr>
                      
                  ‘;
}
 
echo ‘
                            </tbody>
                            </table>
                            <table>
                        <tfoot>
                        
                        </tfoot>                           
‘;
?>
 
</table>
 
indice.php
       <style type=”text/css”>
            <!–
            #paginacao{font-family: Verdana, Arial, Helvetica; font-size: 12px;  }
            .pgoff {color: #FF0000; text-decoration: none}
            a.pg {color: #003366; text-decoration: none}
            a:hover.pg { color: #0066cc; text-decoration:underline}
            –>
        </style>
<?php
 
echo “<div id=’paginacao’>”;
    //Verificando se estamos na primeira página se não estivetr ele imprime o botão de anterior e o numero da primeira página
    //Se não ele desativa o botão de anterior e seta o indicador na primeira página
    if ($pagina > 1) {
        echo ‘&nbsp;<a href=”javascript:paginar(‘ . ($pagina – 2) . ‘,’ . $paginas . ‘,’ . $quant_resul . ‘)”>&laquo; anterior</a>&nbsp;’;
        echo ‘&nbsp;<a href=”javascript:paginar(0,’ . $paginas . ‘,’ . $quant_resul . ‘)”>1</a>&nbsp;’;
    } else {
        echo “<font  color=#CCCCCC>&laquo; anterior</font>”;
        echo “&nbsp;<span class=’pgoff’>[1]</span>&nbsp;”;
    }
    // imprimindo as demais páginas
 
 
    for ($i = $pagina; $i <= ($pagina + 1); $i++) {
        //imprindo o botão da página antes da atual, ela necessita ser diferente da primeira página
        if (($i – 1) == ($pagina – 1) and ($i – 1) != 1 and ($i != 1)) {
            echo ‘…&nbsp;<a href=”javascript:paginar(‘ . ($i – 2) . ‘,’ . $paginas . ‘,’ . $quant_resul . ‘)”>’ . ($i – 1) . ‘</a>&nbsp;’;
        }
        // verificando se estamos na primeira página ou na ultima se estiver ele não imprime nada.
        if ($i == 1 or $i == $paginas or $i == $paginas) {
            echo””;
        }
        // se a página for igual a página atual ele seta o indicador na página e desativa o botão
        elseif ($pagina == $i) {
            echo “&nbsp;<span class=’pgoff’>[$i]</span>&nbsp;”;
        }
        //imprimindo a página após a página atual,
        elseif ($i < $pagina) {
            echo ‘&nbsp;<a href=”javascript:paginar(‘ . $i – 1 . ‘,’ . $paginas . ‘,’ . $quant_resul . ‘)”>’ . $i . ‘</a>&nbsp;’;
        }
        if (($i + 1) == ($pagina + 1) and ($i + 1) != $paginas and $i != $paginas) {
            echo ‘&nbsp;<a href=”javascript:paginar(‘ . ($i) . ‘,’ . $paginas . ‘,’ . $quant_resul . ‘)”>’ . ($i + 1) . ‘</a>&nbsp;…’;
        }
    }
    // verificando novamente se existe apenas a primeira página, se so existir ela é impresso o botão proximo desativado
    if ($paginas == 1) {
        echo “”;
        echo “<font  color=#CCCCCC>próximo &raquo;</font>”;
    }
    //verificando se a página atual é diferente  da ultima página se for diferente ele imprime a ultima página e ativa o botão próximo
    elseif ($pagina < $paginas) {
 
        echo ‘&nbsp;<a  href=”javascript:paginar(‘ . ($paginas – 1) . ‘,’ . $paginas . ‘,’ . $quant_resul . ‘)”>’ . $paginas . ‘</a>’;
        echo ‘&nbsp;<a href=”javascript:paginar(‘ . ($pagina) . ‘,’ . $paginas . ‘,’ . $quant_resul . ‘)”><b>próximo &raquo;</b></a>&nbsp;’;
    }
    // se o sistema estiver na ultima página o indicador é setado na página e o botão próximo é desativado
    else {
        echo “&nbsp;<span class=’pgoff’>[” . $paginas . “]</span>&nbsp;”;
        echo “<font  color=#CCCCCC>próximo &raquo;</font>”;
    }
 
echo “<div><br>”;
?>
 

Download exemplo aqui.