jQuery Quick Pagination es un excelente recurso para paginar listas en poco tiempo y con un script ultraliviano (3kb). Permite colocar la paginación al inicio de la lista, al final o en ambas posiciones, sólo debemos indicarle que cantidad de elementos li queremos que se muestren por página y el plugin hará el resto.
Para aplicarlo a un proyecto primero vinculamos el archivo JS y jQuery desde el <head> de nuestro documento.
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery.quick.pagination.min.js"></script>
Establecemos la estructura de la lista que deseamos paginar, le colocamos clase “pagination”.
<ul class="pagination"> <li>Elemento</li> <li>Elemento</li> <li>Elemento</li> <li>Elemento</li> <li>Elemento</li> </ul>
Al final del documento, relacionamos nuestro paginador a la lista correspondiente.
<script type="text/javascript">
$(document).ready(function() {
$("ul.pagination").quickPagination();
});
</script>Y si deseamos darle estilo, estas son las clases que el script nos genera y nosotros podemos utilizar a conveniencia.
ul.simplePagerNav li{
display:block;
float: left;
padding: 10px;
margin-bottom: 10px;
font-family: georgia;
font-size:14px;
}
ul.simplePagerNav li a{
color: #333;
text-decoration: none;
}
li.currentPage {
background: red;
background: #FF9500;
}
ul.simplePagerNav li.currentPage a {
color: #fff;
}Emprendedora incansable, fundadora de SummArg y de SiteFun.