Paginando conteúdo com twbs (JQuery Pagination Plugin)

Publicado em: 23/09/2024

Sempre que desenvolvemos algo que envolva listar algum conteúdo, um dos pontos mais importantes é: A paginação.
Há um tempo atrás, onde o mundo do PHP era uma terra sem lei (literalmente), era muito comum fazermos a paginação na unha, da forma mais rústica possível. Hoje temos diversos frameworks front-end que são otimizados e já trazem pronta essa opção, porém, quando o dev vem do mundo do backend e deseja desenvolver algo simples e descomplicado, a melhor forma é recorrer ao bom e velho JQuery. E para esse papel, temos o plugin twbs que é super simples de utilizar e nos entrega um resultado rápido e bom. Bora aprender?
Para isso vamos precisar do JQuery, Bootstrap 5 e o plugin de paginação em questão, twbs.

Para começarmos, devemos ter o JQuery importando via CDN ou arquivo local (vou considerar que todos sabem fazer essa importação e em um outro momento mostro como fazer, caso seja necessário). Também precisaremos do plugin twbs pagination que pode ser baixado pelo link. Depois de baixado, basta importarmos o javascript em nossa página onde será feita a paginação (lembrando que o caminho deve ser substituído pelo utilizado em sua aplicação).

<script src="js/jquery.twbsPagination.min.js"></script>

Para o nosso caso de uso, vou utilizar o exemplo de página html fornecido no site do próprio bootstrap. No corpo do nosso html iremos inserir uma div cujo o id será nomeado como posts onde iremos inserir o conteúdo paginado e uma outra div para inserir a ul de paginação.

    <div class="row" id="posts"></div>
    <div class="row">
      <div class="col-md-12 d-flex justify-content-center">
        <div id="pagination" style="margin-top: 20px"></div>
      </div>
    </div>

Agora iremos para os métodos javascript de paginação!

Vamos criar o método de paginação, onde iremos definir a quantidade de páginas visíveis, o número de itens por página e se a paginação será destruída (em caso de uma nova busca no banco ou coisa do tipo) ou não.

function paginacao(data, destroy = 0) {
        let pagination = $("#pagination"),
          totalRecords = data.length, //qtde total de registros
          displayRecords = [];
        let recPerPage = 5; //qtde de registros por página
        let page = 1;
        let totalPages = Math.ceil(totalRecords / recPerPage);
        if (destroy == 1) {
          pagination.twbsPagination("destroy"); //reseta tabela (caso seja realizada uma nova busca)
        }
        pagination.twbsPagination({
          totalPages: totalPages,
          visiblePages: 6, //configuração de quantas páginas serão exibidas
          first: "Primeira",
          prev: "Anterior",
          next: "Próxima",
          last: "Última",
          onPageClick: function (event, page) {
            let displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
            let endRec = displayRecordsIndex + recPerPage;
            let displayRecords = data.slice(displayRecordsIndex, endRec);
            montaConteudo(displayRecords); //método para montar o conteúdo a ser exibido na página
          },
        });
      }

Depois de termos configurada a paginação, basta apenas criarmos o método para montar o conteúdo:

      function montaConteudo(data) {
        let html = "";
        $.each(data, function (index, value) {
          html += '<div class="col-md-4">';
          html += '<div class="card" style="margin-bottom: 20px">';
          html += '<div class="card-body">';
          html += '<h5 class="card-title">' + value.name + "</h5>";
          html += '<p class="card-text">' + value.email + "</p>";
          html += "</div>";
          html += "</div>";
          html += "</div>";
        });
        $("#posts").html(html);
      }

Para vermos o resultado final, montei um JSON fictício, que posteriormente vocês irão substituir pelos dados vindo da api e/ou base de dados de vocês, apenas para vermos como irá ficar.

      var data = [
        { name: "Ram", email: "[email protected]" },
        { name: "Bob", email: "[email protected]" },
        { name: "Ram", email: "[email protected]" },
        { name: "Bob", email: "[email protected]" },
        { name: "Ram", email: "[email protected]" },
        { name: "Bob", email: "[email protected]" },
        { name: "Ram", email: "[email protected]" },
        { name: "Bob", email: "[email protected]" },
        { name: "Ram", email: "[email protected]" },
        { name: "Bob", email: "[email protected]" },
        { name: "Ram", email: "[email protected]" },
        { name: "Bob", email: "[email protected]" },
        { name: "Ram", email: "[email protected]" },
        { name: "Bob", email: "[email protected]" },
      ];

E para visualizarmos na nossa página html, agora devemos chamar o método de paginação enviando os dados:

paginacao(data);

E como resultado, teremos a imagem a seguir:
 

Imagem 1 - Exemplo mostrando o resultado final da paginação.

E para quem quiser, deixo o link para o código completo no meu github.
Comente aqui embaixo caso tenha gostado ou não. Deixe sugestões, envie dúvidas, etc.