RSS

Como fazer uma paginação

Pietro Gaião | agosto 8th, 2009 | JavaScript DOM | No Comments »

Olá pessoal, hoje estou compartilhando algo que sei que muita gente que está começando ainda tem dúvidas.
Não é uma paginação das super completas, mas sim uma paginação simples e muito funcional.
Vamos ao que interessa.

Primeiro vamos criar um array com todas as imagens que serão carregadas.

             var imagens = new Array(	"'images/1.jpg'","'images/2.jpg'","'images/3.jpg'",
	"'images/4.jpg'","'images/5.jpg'","'images/6.jpg'",
	"'images/7.jpg'","'images/8.jpg'","'images/9.jpg'"	);

Feito isso, criaremos a função paginacao(), responsável pela paginação.

Nessa função iremos passar o parâmetro que receberá o número da página e chamaremos a função que escreverá o conteúdo no html.

function paginacao(inicio){

    i = inicio;

    var retorno = "<center><div>";
    retorno += "<a href='#' onclick='paginacao(0)'>1</a> | ";
    retorno += "<a href='#' onclick='paginacao(4)'>2</a> |<br><br>";
    retorno += "<img src="+imagens[i++]+" />";
    retorno += "<img src="+imagens[i++]+" />";
    retorno += "<img src="+imagens[i++]+" />";
    retorno += "<img src="+imagens[i++]+" />";
    retorno += "</div></center>";
document.getElementById("alvo").innerHTML = retorno;
}

Note, na linha abaixo passamos o valor para informar de quantas e quantas imagens queremos mostrar.
Página 1| vai de 0 a 3, página 2| vai de 4 em diante …

    retorno += "<a href='#' onclick='paginacao(0)'>1</a> | ";
    retorno += "<a href='#' onclick='paginacao(4)'>2</a> |<br><br>";

Confira abaixo o script completo.

<html>
<head>
<title>Pietro Gaião - Como fazer uma paginação simples</title>
<script type="text/javascript">	var imagens = new Array(
	"'images/1.jpg'","'images/2.jpg'","'images/3.jpg'",
	"'images/4.jpg'","'images/5.jpg'","'images/6.jpg'",
	"'images/7.jpg'","'images/8.jpg'","'images/9.jpg'"	);
function paginacao(inicio){i = inicio;var retorno = "<center><div>";
    retorno += "<a href='#' onclick='paginacao(0)'>1</a> | ";
    retorno += "<a href='#' onclick='paginacao(4)'>2</a> |<br><br>";
    retorno += "<img src="+imagens[i++]+" />";
    retorno += "<img src="+imagens[i++]+" />";
    retorno += "<img src="+imagens[i++]+" />";
    retorno += "<img src="+imagens[i++]+" />";
    retorno += "</div></center>";
document.getElementById("alvo").innerHTML = retorno;}</script>
</head><body onLoad="paginacao(0);">
<div id="alvo"></div>
</body>
</html>

Veja o exemplo de como ficou nossa paginação.
exemplo de paginação

Popularity: 16% [?]

Tags:,

Leave a Reply