Como fazer uma paginação HTML

Como fazer uma paginação HTML?

Neste artigo passo a passo veja como você pode construir uma paginação do zero com HTML, CSS e Javascript, mesmo com pouco conhecimento na área do desenvolvimento.

A paginação para indicar um série de conteúdos relacionados, existentes em várias páginas.

Nós usamos um grande bloco de links conectados para nossa paginação, fazendo-os fácil de clicar e escalar. A paginação é feita com elementos HTML de lista para que leitores de telas possam anunciar o número de links disponíveis. Use um elemento <nav> como envolto para identificá-lo como uma seção de navegação aos leitores de telas e outras tecnologias assistivas.

Estados desativado e ativado

Links de paginação são personalizáveis para diferentes ocasiões. Use .disabled para links não poderem ser clicados e .active para indicar a página atual.

Apesar da classe .disabled usar pointer-events: none para tentar desativar a funcionalidade de link do <a>, esta propriedade CSS ainda não é padronizada e não conta com navegação pelo teclado. Assim, você deve sempre colocar tabindex="-1" em links desativados e usar JavaScript personalizado para desativar suas funcionalidades, totamente.

Opcionalmente, você pode trocar âncoras ativadas e desativadas por <span> ou, omitir a âncora no caso de flechas anterior/próximo, para remover a funcionalide de clique e evitar foco de teclado, enquanto mantém os estilos.

Paginação com Html, Css e Javascript

Nesta seção, projetaremos uma estrutura simples na tag <div>,<article>, <img>, <time>,<h3> e a tag <a> para inserirmos o link de destino. 

Essas são as tags que usaremos para criar o nossa Paginação com os artigos listados.

Estrutura Código HTML

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido, veja o exemplo abaixo.

    <!--Abre paginação-->

    <div class="box-pinacao">
      
        <div class="item-pg">
            
            <article class="artigos">

                <div class="capa">
                    <img src="https://www.loopnerd.com.br/wp-content/uploads/2023/08/pagina-de-login-html.jpg" alt="slide">
                </div>

                <div class="desc">  
                  <time datetime="14 de agosto de 2023">Postado em: 14 de agosto de 2023</time>
                  <h3><a href="https://www.loopnerd.com.br/codigos-css-prontos/pagina-de-login-html/" title="Página de login html">Página de login html</a></h3>
                </div>

            </article>

        </div><!--1-->

        <div class="item-pg">
            
            <article class="artigos">

                <div class="capa">
                    <img src="https://www.loopnerd.com.br/wp-content/uploads/2023/07/slideshow-template.jpg" alt="slide">
                </div>

                <div class="desc">  
                  <time datetime="31 de julho de 2023">Postado em: 31 de julho de 2023</time>
                  <h3><a href="https://www.loopnerd.com.br/jquery/slideshow-template/" title="Códigos Html">Slideshow template</a></h3>
                </div>

            </article>


        </div><!--2-->

        <div class="item-pg">
            
            <article class="artigos">

                <div class="capa">
                    <img src="https://www.loopnerd.com.br/wp-content/uploads/2023/03/formulario-html-com-inputs-animado-com-css-efeito-slide.jpg" alt="slide">
                </div>

                <div class="desc">  
                  <time datetime="27 de março de 2023"> Postado: 27 de março de 2023</time>
                  <h3><a href="https://www.loopnerd.com.br/codigos-css-prontos/formulario-html-com-inputs-animado-com-css-efeito-slide/" title="Formulário html e css com Efeito Slide">Formulário html e css com Efeito Slide</a></h3>
                </div>

            </article>

        </div><!--3-->

        <div class="item-pg">
            
            <article class="artigos">

                <div class="capa">
                    <img src="https://www.loopnerd.com.br/wp-content/uploads/2023/07/slide-pronto-para-editar.jpg" alt="slide">
                </div>

                <div class="desc">  
                  <time datetime="24 de julho de 2023">Postado em: 24 de julho de 2023</time>
                  <h3><a href="https://www.loopnerd.com.br/codigos-css-prontos/slide-pronto-para-editar/" title="Slide pronto para editar">Slide pronto para editar</a></h3>
                </div>

            </article>

        </div><!--4-->

        <div class="item-pg">
            
            <article class="artigos">

                <div class="capa">
                    <img src="https://www.loopnerd.com.br/wp-content/uploads/2022/10/tela-de-login-pronta-html-css.jpg" alt="slide">
                </div>

                <div class="desc">  
                  <time datetime="13 de outubro de 2022">Postado em: 13 de outubro de 2022</time>
                  <h3><a href="https://www.loopnerd.com.br/codigos-css-prontos/tela-de-login-pronta-html-css/" title="Tela de login pronta HTML CSS">Tela de login pronta HTML CSS</a></h3>
                </div>

            </article>

        </div><!--5-->

        <div class="item-pg">
            
            <article class="artigos">

                <div class="capa">
                    <img src="https://www.loopnerd.com.br/wp-content/uploads/2022/03/espaco-entre-linhas-css.jpg" alt="slide">
                </div>

                <div class="desc">  
                  <time datetime="29 de março de 2022">Postado em: 29 de março de 2022</time>
                  <h3><a href="https://www.loopnerd.com.br/codigos-css-prontos/espaco-entre-linhas-css/" title="Espaço entre linhas css">Espaço entre linhas css</a></h3>
                </div>

            </article>

        </div><!--6-->

        <div class="item-pg">
            
            <article class="artigos">

                <div class="capa">
                    <img src="https://www.loopnerd.com.br/wp-content/uploads/2023/01/botao-pulsante-css.jpg" alt="slide">
                </div>

                <div class="desc">  
                  <time datetime="20 de janeiro de 2023">Postado em: 20 de janeiro de 2023</time>
                  <h3><a href="https://www.loopnerd.com.br/codigos-css-prontos/botao-pulsante-css/" title="Slideshow pronto">Botão pulsante css</a></h3>
                </div>

            </article>

        </div><!--7-->

        <div class="item-pg">
            
            <article class="artigos">

                <div class="capa">
                    <img src="https://www.loopnerd.com.br/wp-content/uploads/2023/07/slideshow-pronto.jpg" alt="slide">
                </div>

                <div class="desc">  
                  <time datetime="30 de julho de 2023">Postado em: 30 de julho de 2023</time>
                  <h3><a href="https://www.loopnerd.com.br/jquery/slideshow-pronto/" title="Slideshow pronto">Slideshow pronto</a></h3>
                </div>

            </article>

        </div><!--8-->

        <div class="item-pg">
            
            <article class="artigos">

                <div class="capa">
                    <img src="https://www.loopnerd.com.br/wp-content/uploads/2021/09/7-geradores-de-codigos-css-para-otimizar-o-seu-tempo.jpg" alt="slide">
                </div>

                <div class="desc">  
                  <time datetime="19 de setembro de 2021">Postado em: 19 de setembro de 2021</time>
                  <h3><a href="https://www.loopnerd.com.br/tecnologia/geradores-de-codigos-css/" title="Geradores de Códigos CSS">Geradores de Códigos CSS</a></h3>
                </div>

            </article>

        </div><!--9-->

    
    </div>

    <ul class="btn-paginacao"></ul>  

    <!--Fecha paginação-->

Vamos adicionar o Script para fazer a paginação

<script src="js/jquery.js"></script>
<!--Começa o Script da paginação-->
<script type="text/javascript">
    
    var limitItemsperPage = 3; //Aqui você pode o numero de items a ser exibido na tela
    var counter = 0;
    var numberOfPages = 0;

    $(".box-pinacao > .item-pg").each(function(){
      if(counter == limitItemsperPage){counter = 0;}
      if(counter == 0){
        ++numberOfPages;
        $(".box-pinacao").append(`
          <div class="page" page-id="${numberOfPages}">
          </div>
        `);
      };
      $(this).clone().appendTo(".page[page-id="+numberOfPages+"]");
      $(this).detach();
      ++counter;
    });
    for(let i = 1; i <= numberOfPages; i++){
      $(".btn-paginacao").append(`
        <li class="page_anchor" page-id="${i}">${i}</li>
      `)
    }
    $("ul.btn-paginacao").append(`<button onclick="changePage('next')"> > </button>`);
    $("ul.btn-paginacao").prepend(`<button onclick="changePage('prev')"> < </button>`);

    $(".page").eq(0).addClass("ativaPag");
    $(".page_anchor").eq(0).addClass("ativaPag");
    $(".page_anchor").on("click",function(){
      var id = $(this).attr("page-id");
      $(".page_anchor.ativaPag").removeClass("ativaPag");
      $(this).addClass("ativaPag");
      
      $(".page.ativaPag").removeClass("ativaPag");
      $(".page[page-id="+id+"]").addClass("ativaPag");
    });

    function changePage(command){
      try{
        if(command == 'next'){
          $("li.ativaPag").next().trigger("click");
        }
        if(command == 'prev'){
          $("li.ativaPag").prev().trigger("click");
        }
      }catch(err){ }
      
    }

</script>
<!--Finaliza o Script da paginação-->

Estrutura Código CSS

Para conseguirmos um design mais atraente, vamos adicionar algumas propriedades  CSS  para as tags que foram colocadas na sessão acima HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades  CSS para estilizar o nossa páginação.

/*Artigo e Paginação*/

.artigos { 

	width:100%; 
	height:100%; 
	background-color:#ffffff; 
	box-shadow:0px 1px 2px rgba(0,0,0,0.15); 
	margin-bottom:1.5em; 
	float:left; 
	position:relative; 
	overflow:hidden; 
	border-radius:4px; 

}

.artigos .capa { overflow:hidden; position:relative; }

.artigos img  { 

	left:0%; 
	max-width:100%!important; 
	width:100%; 
	height:auto; 
	position:relative!important; 
	border:none!important; 
	display:block; 

}

.artigos .desc { 

	background-color:transparent; 
	width:100%; 
	float: left; 
	padding:1em;

}

.artigos .desc  time { 

	width:100%; 
	float:left; 
	font-size:0.9em; 
	color: #7d7d7d; 
	font-family:'open_sansregular'; 

}

.artigos .desc h3 { 

	width:100%; 
	float:left; font-family: 'open_sanslight'; 
	font-size:1.2em; 
	color:#4d4d4d; 
	text-align:left;
	padding:0.4em 0em;

}

.artigos .desc h3 a       { text-decoration:none; color: #004fea; }
.artigos .desc h3 a:hover { text-decoration:underline; color: #212121; }

/*Paginação*/

.item-pg {

    padding:0;
    width: 100%;
    float: left;
    background: transparent;

}

.page {
  
    width: 100%;
    float: left;
    background-color:transparent;
    display: none;
    margin-bottom: 20px;

}

.ativaPag { display: block; }

.btn-paginacao {

    list-style-type: none;
    display: flex;
    padding: 0;
    width: max-content;
    margin: 30px auto;

}

.btn-paginacao li, .btn-paginacao button {

    padding: 5px 11px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    border-radius:50px;
    margin:5px;
    transition: .3s;

}

.btn-paginacao li.ativaPag, .btn-paginacao li:hover, .btn-paginacao button.ativaPag, .btn-paginacao button:hover {
  
    background-color: #004fea;
    border: 1px solid #004fea;
    color: #fff;
    transition: .3s;

}

/*768PX BREAKPOINT*/
@media (min-width:48em) {

    .item-pg                   { width:32%; float:left; margin-right:2%; }
    .item-pg:nth-of-type(3n+0) { margin-right:0; }

}

/*Artigo e Paginação*/

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Conclusão

Neste artigo, você aprendeu o passo a passo de como criar uma paginação com HTML, CSS e JAVASCRIPT, existem diversos formas de criar um design de paginação.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.

A imaginação é mais importante que o conhecimento. O conhecimento é limitado, enquanto a imaginação abraça o mundo inteiro, estimulando o progresso, dando à luz à evolução.– (Albert Einstein)