-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Paginação</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<script>
let lsAlunos = ["Alef Mourão dos Santos", "Andre Alex", "Danilo Rodrigues Soares", "Dhiego de Sampaio", "Emerson de Ferto", "Gabriel de Oliveira ", "Jhoune Souza Justino", "Josef Gildevan Santos", "João Santos Chagas", "Julio Lima", "Jônatas Maciel", "Loren Muniz Ferreira", "Luna Cavalcante", "Marcos Silva", "Marcos Barbosa da Silva", "Tais Pereira Melo", "Yudi Medeiros Santos", "Marco Pereira Silva"];
pgAtual = 0;
function carregarTabela(pg) {
tamanhoArray = Math.ceil((lsAlunos.length) / 5);
if (pg <= 0 || pg > tamanhoArray) {
return;
}
pgAtual = pg;
fim = (pg * 5);
inicio = fim - 5;
txLinhas = "";
for (i = inicio; i < fim; i++) {
if (lsAlunos[i] == undefined) break;
txLinhas += `<tr><td>${Number(i) + 1}</td><td>${lsAlunos[i]}</td></tr>`;
}
document.getElementById("corpoTabela").innerHTML = txLinhas;
itemLista = document.getElementById("pg-" + pg);
itemLista.classList.add("active");
antigo = document.getElementById("pgAT");
if (antigo.value != '') {
itemLista = document.getElementById("pg-" + antigo.value);
itemLista.classList.remove("active");
}
antigo.value = pg;
}
function mudarPagina(pg) {
carregarTabela(pgAtual + pg);
}
</script>
<input type="hidden" value="" id="pgAT">
<table class="table table-striped">
<thead>
<tr>
<th>
Linha
</th>
<th>
Nome dos Alunos
</th>
</tr>
</thead>
<tbody id="corpoTabela">
</tbody>
</table>
<ul class="pagination justify-content-center" id="paginacao">
</ul>
<script>
lsPagina = `<li class="page-item"><a class="page-link" href="#" onclick="carregarTabela(document.getElementById('pgAT').value -1)">Anterior</a></li>`
tamanhoArray = Math.ceil((lsAlunos.length) / 5);
for (i = 0; i < tamanhoArray; i++) {
lsPagina += `<li id='pg-${Number(i)+1}' class="page-item"><a class="page-link" href="#" onclick="carregarTabela(${Number(i)+1})">${Number(i)+1}</a></li>`
}
lsPagina += `<li class="page-item"><a class="page-link" href="#" onclick="carregarTabela(Number(document.getElementById('pgAT').value) +1)">Próximo</a></li>`;
document.getElementById("paginacao").innerHTML = lsPagina;
carregarTabela(1);
</script>
</body>
</html>