COMO USAR PAGINAÇÃO

Como fazer paginação com Bootstrap?

Como fazer paginação com Bootstrap?

Para fazer isso é usado a classe pagination do bootstrap.

Neste artigo será mostrado como fazer a parte do front end da paginação com Bootstrap. No final terá link para outras maneiras de fazer o front e o beck end do sistema de páginas.

A lista de páginas usadas será:

    primeira
    <
    3
    4
    5
    >
    última

Sendo página atual a 4, o sinal de maior usado para a página seguinte, o sinal de menor usado para a página anterior, "última" como a página final que será a 8 e "primeira" para a inícial.

No exemplo abaixo é mostrada a paginação simples, com a página atual em destaque e sem possibilidade de ser clicada.

<nav aria-label="bloco de páginas">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#1">primeira</a></li>
    <li class="page-item"><a class="page-link" href="#3"><</a></li>
    <li class="page-item"><a class="page-link" href="#3">3</a></li>
    <li class="page-item active disabled"><a class="page-link" href="#4">4</a></li>
    <li class="page-item"><a class="page-link" href="#5">5</a></li>
    <li class="page-item"><a class="page-link" href="#6">></a></li>
    <li class="page-item"><a class="page-link" href="#8">última</a></li>
  </ul>
</nav>

O aria-label é necessário para usar mais um bloco de paginação na página.

O active é usado para mudar o estilo da página atual.

Se a página atual fosse a 8 poderia ser usado a classe disabled para inativar o clique no link última e próximo. O mesmo poderia ser feito quanto estivesse na primeira. Ficando assim:

<li class="page-item disabled"><a class="page-link" href="#8">&gt;</a></li>
<li class="page-item disabled"><a class="page-link" href="#8">última</a></li>

Para definir o tamanho dos botões pode se usar a classe de pagination seguida do tamanho que pode ser lg para grande e sm para pequeno. Ficando assim:

<ul class="pagination pagination-lg">
ou
<ul class="pagination pagination-sm">



Para alinhar o bloco de botões pode ser usado a classe de alinhamento junto a classe pagination.
Algo como:

<ul class="pagination pagination-sm justify-content-center">
Veja mais em:
Como fazer paginação com php e mysql?

Como fazer leiaute de paginação com CSS?

O que é paginação de um site?
O que é Bootstrap?



Como aplicar estilo css nos botões de paginação?

Como aplicar estilo css nos botões de paginação?

Basta usar um css simples como esse aqui:


 <!-- Primeiro é construída a lista com a classe pagination -->
             <ul class="pagination">
<!-- Abre a primeira linha da lista -->
                      <li>
<!-- Insere o link para a página 1 com o texto de duas setas, algo meio padrão na web -->
                        <a href="https://diretoaoponto-tech.com.br/?p=1" target="_self">«</a>
<!-- Fecha a primeira linha -->
                    </li>
<!-- Inicia a próxima linha -->
                    <li>
<!-- Coloca um link sem href apenas com a classe active, pois é a página atual, e o texto 1 -->
                        <a class="active">1</a>
<!-- Fecha a linha -->
                    </li>
<!-- Abre a linha para o botão 2 -->
                    <li>
<!-- Insere o link para a página dois com o texto "2" -->
                        <a href="https://diretoaoponto-tech.com.br/?p=2">2</a>
<!-- Fecha a linha -->
                    </li>
<!-- Abre a linha para a última página. -->
                    <li>
<!-- com as setas apontadas para a direita. Nesse caso a última página é a 2 mesmo -->
                        <a href="https://diretoaoponto-tech.com.br/?p=2" target="_self">»</a>
<!-- Fecha a última linha-->
                   </li>
<!-- Fecha a lista-->
            </ul>


Ficando assim:


Agora é feito o CSS para colocar o estilo.
 

 /** Abre a configuração de estilo CSS **/
<style rel="stylesheet" scoped="scoped" type="text/css">

ul.pagination { /** Inicia a configiração da lista pagination**/
       display: inline-block; /** Inicia uma nova linha e espande para esquerda **/
       padding: 0; /** Retira o espaço interno da lista **/
 }
  
  ul.pagination li { /** Inicia a configuração da linha da lista **/
     display: inline; /** Deixa uma linha do lado da outra **/
}
  
  ul.pagination li a{ /** Coloca o estilo no botão que tem link a **/
       color: black; /** Fonte preta **/
       float: left; /** Alinha a esquerda **/
       padding: 8px 16px; /** Adiciona espaço na linha **/
       text-decoration: none;
/** Tira decoração do texto **/
   }
  
  ul.pagination li a.active { /** Coloca o estilo no link com a classe active **/
       background-color: blue; /** Define uma cor de fundo para o botão da página atual **/
       color: white; /** A cor da fonte também **/
   }
  
  ul.pagination li a:hover:not(.active) {/** Insere o estilo para quando o mouse passar por cima do link exeto no botão da página atual **/
       background-color: #ddd; /** Insere um tom de cinza **/
}

</style>
/** Fecha a configuração de estilo **/

Ficando assim:

  • «
  • 1
  • 2
  • »

Nesse código tem um pequeno exemplo de todos os efeitos comuns em botões de página.



Como criar paginação PHP com mysql?

Como criar paginação PHP com mysql?

De uma maneira simples para explicar é usado o mysqli

Veja o exemplo abaixo:



<?php //Inicia o código PHP.
    include "conectar.php"; //Chama o arquivo com a conexão ao banco.
    $p = $_REQUEST["p"]; // Pegar a página atual por GET.
    // Verifica se a variável tá declarada, senão deixa na primeira página como padrão.
    if(isset($p)) { $p = $p; } else { $p = 1; }
    // Defina aqui a quantidade máxima de registros por página.
    $qnt = 20; //No caso 20 por página.
    // O sistema calcula o início da seleção, calculando:
    // (página atual * quantidade por página) - quantidade por página
    $inicio = ($p*$qnt) - $qnt;

     // Seleciona no banco de dados com o LIMIT indicado pelos números acima.
    $sql_select = "select * FROM tabela limit $inicio, $qnt";
    // Executa a query com mysqli.
    $sql_query = mysqli_query($conn,$sql_select);
    // Faz uma nova seleção no banco de dados semelhante a anterior, mas desta vez sem LIMIT, para pegarmos o número total de registros.
    $sql_select_all = "select * FROM tabela";
    // Executa a query das seleções acima.
    $sql_query_all = mysqli_query($conn,$sql_select_all);
    // Gera uma variável com o número total de registros no banco de dados.
    $total_registros = mysqli_num_rows($sql_query_all);
    $num_rows = ($total_registros);
    // Gera outra variável, desta vez com o número de páginas que será precisa.
    // O comando ceil() arredonda "para cima" o valor.

    $pags = ceil($total_registros/$qnt);
     echo ' //Inicia o texto que será impresso na tela.
        <div id="dados">//Inicia uma div com a class dados.
                 <table> //Inicia uma tabela.
                    <tr> //Cria a linha da tabela.
                        <th></th>//Espaço vazio pois é a primeira linha e primeira coluna.
                        //Cria o título do primeiro campo.
                        <th class="titulo">C&oacute;digo</th>
                        //Cria o título do segundo campo.
                        <th class="titulo">Descri&ccedil;&atilde;o</th>
                     </tr>';//Fecha a linha dos títulos.
                    // Cria um while para pegar as informações do BD para os itens.
                    while ($row = $sql_query->fetch_array(MYSQLI_ASSOC)) {
                        echo '//Inicia a tabela com dados dinâmicos.
                        <tr>
                            //Chama o campo código.
                            <td class="item" style="text-align:center; padding:2px; vertical-align: middle; display: ">' . $row['codigo'] .'</td>
                            //Chama o campo descrição.
                            <td class="item" style="text-align:center; padding:5px;">' . $row['descricao'] .'</td>
                    </tr>';
                  }//Fecha o while.
?>//Fecha o PHP.
                </table>
        </div>//Acima fecha a tabela e aqui fecha a div.
<?php //Abre novamente o PHP.
    if($pags > 1){ //Verifica se tem mais de uma página.
        // Número máximos de botões de paginação.
        $max_links = 3;
        // Exibe o primeiro link "primeira página", que não entra na contagem acima(3).
        echo '<a href="https://diretoaoponto-tech.com.br?p=1" target="_self">primeira p&aacute;gina</a> ';
        // Cria um for() para exibir os 3 links antes da página atual.
        for($i = $p-$max_links; $i <= $p-1; $i++) {
            // Se o número da página for menor ou igual a zero, não faz nada.
            if($i >= 1){//Então chama o link se for 1 ou maior.
                //Cria o link com o número do indice.
                echo '<a href="https://diretoaoponto-tech.com.brp='.$i.'" target="_self">'.$i.'</a> ';
            }//Fecha o if.
        }//Fecha o for.
        // Exibe a página atual, sem link, apenas o número
        echo $p." ";
        // Cria outro for(), desta vez para exibir 3 links após a página atual.
        for($i = $p+1; $i <= $p+$max_links; $i++) {
            // Verifica se a página atual é maior do que a última página. Se for, não faz nada.
            if($i > $pags) {
            //faz nada.
            }
            // Se tiver tudo Ok gera os links.
            else {
                echo '<a href="https://diretoaoponto-tech.com.br?p='.$i.'" target="_self">'.$i.'</a> ';
            }
        }
        // Exibe o link "última página"
        if($pags <= 0){
            $i=1;
        }
        else{
            $i=$pags;
            }
        echo '<a href="https://diretoaoponto-tech.com.br?p='.$i.'" target="_self">&uacute;ltima p&aacute;gina</a> ';   
    }
    echo '</div>';
?>
</div>//Fecha a div inicial.

Pronto tem aí um exemplo de paginação com PHP simples e funcional. O html pode ser estilizado com o css como mostra esse link: CSS para paginação.



botão de compartilhamento whatsapp botão de compartilhamento no twiter botão de compartilhamento do site botão de compartilhamento no linkedin botão de compartilhamento whatsapp