Algumas vezes, vamos deparar com uma situação onde é preciso fazer uma paginação sem a ajuda de uma linguagem de backend. É exatamente isso que vou ensinar aqui: fazer um sistema de paginação utilizando JavaScript , jQuery e Bootstrap.
Vamos primeiramente criar a nossa estrutura HTML e chamar as bibliotecas:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet"href="/css/bootstrap.min.css">
// somente para ficar mais "bonito o layout" vamos dar um padding-bottom no select
<style type="text/css">
.col-lg-12{
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="col-lg-12">
<p>itens por pagina</p>
<select id="qtd" class="form-control input-sm input-order">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="all" id="conteudo">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary ">
<p>Tabless 1</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary ">
<p>Tabless 2</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary ">
<p>Tabless 3</p>
</div>
</div>
</div>
<div id="pagi"></div> //div responsável por mostrar a paginação
</body>
</html>
Reparem que eu escrevi 3 vezes a mesma div. Vocês podem repetir quantas vezes quiserem ou até coloca-lá em loop (foreach do PHP, por exemplo). É exatamente essa repetição que vamos paginar. Vamos agora criar as funções em JavaScript:
<script type="text/javascript">
//acionamos o jquery para iniciar a paginação quando o documento estiver "pronto"
$(document).ready(function() {
//Pegamos o valor selecionado default no select id="qtd"
var mostrar_por_pagina = $('#qtd').val();
//quantidade de divs
var numero_de_itens = $('#conteudo').children('.col-lg-3').size();
//fazemos uma calculo simples para saber quantas paginas existiram
var numero_de_paginas = Math.ceil(numero_de_itens / mostrar_por_pagina)
//Colocamos a div class controls dentro da div id pagi
$('#pagi').append('<div class=controls></div>
<input id=current_page type=hidden><input id=mostrar_por_pagina type=hidden>');
$('#current_page').val(0);
$('#mostrar_por_pagina').val(mostrar_por_pagina);
//Criamos os links de navegação
var nevagacao = '<li><a class="prev" onclick="anterior()">Prev</a></li>';
var link_atual = 0;
while (numero_de_paginas > link_atual) {
nevagacao += '<li><a class="page" onclick="ir_para_pagina(' + link_atual + ')" longdesc="'
+ link_atual + '">' + (link_atual + 1) + '</a></li>';
link_atual++;
}
nevagacao += '<li><a class="proxima" onclick="proxima()">proxima</a></li>';
//colocamos a nevegação dentro da div class controls
$('.controls').html("<div class='paginacao'>\
<ul class='pagination pagination-sm'>"+nevagacao+"</ul></div>");
//atribuimos ao primeiro link a class active
$('.controls .page:first').addClass('active');
$('#conteudo').children().css('display', 'none');
$('#conteudo').children().slice(0, mostrar_por_pagina).css('display', 'block');
});
</script>
Até aqui, a paginação já é mostrada, porém, ao clicar nos links, nada acontece. Vamos criar as seguintes funções em JavaScript para que funcione: ir_para_pagina(), _anterior()_ e proxima().
Então mãos à obra:
<script type="text/javascript">
function ir_para_pagina(numero_da_pagina) {
//Pegamos o número de itens definidos que seria exibido por página
var mostrar_por_pagina = parseInt($('#mostrar_por_pagina').val(), 0);
//pegamos o número de elementos por onde começar a fatia
inicia = numero_da_pagina * mostrar_por_pagina;
//o número do elemento onde terminar a fatia
end_on = inicia + mostrar_por_pagina;
$('#conteudo').children().css('display', 'none').slice(inicia, end_on).css('display', 'block');
$('.page[longdesc=' + numero_da_pagina+ ']').addClass('active')
.siblings('.active').removeClass('active');
$('#current_page').val(numero_da_pagina);
}
function anterior() {
nova_pagina = parseInt($('#current_page').val(), 0) - 1;
//se houver um item antes do link ativo atual executar a função
if ($('.active').prev('.page').length == true) {
ir_para_pagina(nova_pagina);
}
}
function proxima() {
nova_pagina = parseInt($('#current_page').val(), 0) + 1;
//se houver um item após o link ativo atual executar a função
if ($('.active').next('.page').length == true) {
ir_para_pagina(nova_pagina);
}
}
</script>
Pronto, agora temos um sistema de paginação baseado em div’s com JavaScript + jQuery, porém, precisamos pegar a quantidade de itens por página que o usuário escolher e remontar toda a paginação. Para isso, vamos usar a função change do jQuery:
<script type="text/javascript">
// Pegamos o evento change do select id="qtd" e remontamos toda a paginação default
$( "#qtd" ).change(function() {
//Removemos os "controles" de paginação
$(".controls").remove();
//Pegamos o valor selecionado
var mostrar_por_pagina = this.value;
//remontamos a paginação
var numero_de_itens = $('#conteudo').children('.col-lg-3').size();
var numero_de_paginas = Math.ceil(numero_de_itens / mostrar_por_pagina);
//Colocamos a div class controls dentro da div id pagi
$('#pagi').append('<div class=controls></div>
<input id=current_page type=hidden><input id=mostrar_por_pagina type=hidden>');
$('#current_page').val(0);
$('#mostrar_por_pagina').val(mostrar_por_pagina);
//Criamos os links de navegação
var nevagacao = '<li><a class="prev" onclick="previous()">Prev</a></li>';
var link_atual = 0;
while (numero_de_paginas > link_atual) {
nevagacao += '<li><a class="page" onclick="ir_para_pagina(' + link_atual + ')" longdesc="'
+ link_atual + '">' + (link_atual + 1) + '</a></li>';
link_atual++;
}
nevagacao += '<li><a class="next" onclick="next()">Next</a></li>';
//colocamos a navegação dentro da div class controls
$('.controls').html("<div class='paginacao'>
<ul class='pagination pagination-sm'>"+nevagacao+"</ul></div>");
$('.controls .page:first').addClass('active');
$('#conteudo').children().css('display', 'none');
$('#conteudo').children().slice(0, mostrar_por_pagina).css('display', 'block');
});
</script>
Nosso sistema de paginação completo, totalmente no HTML, é uma das vantagens dessa paginação. O ganho de performance, claro, depende da quantidade de dados.
Adaptado de https://web.enavu.com/tutorials/making-a-jquery-pagination-system/