Paginación simple en JavaScript
- Función de paginación personalizada para paginar páginas web
-
Uso del complemento
Jquerypagination.jspara navegar en páginas web
En JavaScript, a menudo definimos nuestros ámbitos de función preferidos para extraer ciertas actividades. La paginación en JavaScript se puede programar manualmente con la combinación de múltiples funciones.
Demostraremos cómo crear paginación para navegar de una página a otra. Crearemos funciones básicas de paginación para operarlo, y también veremos otro ejemplo con el complemento jquery pagination.js que facilitará nuestra experiencia de codificación.
Función de paginación personalizada para paginar páginas web
Declararemos inicialmente el objeto que tiene nuestros datos. El siguiente paso es contar cada dato y cuánto deseamos previsualizar en una página. También obtendremos el número total de páginas en nuestra página web en este proceso.
Después de que la función totNumPages calcule nuestra cantidad total de páginas, crearemos la función base para presionar prev y next.
Revisemos el bloque de código para tener una idea clara.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="TableList"></div>
<a href="javascript:prevPage()" id="btn_prev">Prev</a>
<a href="javascript:nextPage()" id="btn_next">Next</a><br>
page: <span id="page"></span>
</body>
</html>
var obj = [
{number: 'Number 1'}, {number: 'Number 2'}, {number: 'Number 3'},
{number: 'Number 4'}, {number: 'Number 5'}, {number: 'Number 6'},
{number: 'Number 7'}, {number: 'Number 8'}, {number: 'Number 9'},
{number: 'Number 10'}, {number: 'Number 11'}, {number: 'Number 12'},
{number: 'Number 13'}, {number: 'Number 14'}, {number: 'Number 15'}
];
var current_page = 1;
var obj_per_page = 3;
function totNumPages() {
return Math.ceil(obj.length / obj_per_page);
}
function prevPage() {
if (current_page > 1) {
current_page--;
change(current_page);
}
}
function nextPage() {
if (current_page < totNumPages()) {
current_page++;
change(current_page);
}
}
function change(page) {
var btn_next = document.getElementById('btn_next');
var btn_prev = document.getElementById('btn_prev');
var listing_table = document.getElementById('TableList');
var page_span = document.getElementById('page');
if (page < 1) page = 1;
if (page > totNumPages()) page = totNumPages();
listing_table.innerHTML = '';
for (var i = (page - 1) * obj_per_page; i < (page * obj_per_page); i++) {
listing_table.innerHTML += obj[i].number + '<br>';
}
page_span.innerHTML = page;
if (page == 1) {
btn_prev.style.visibility = 'hidden';
} else {
btn_prev.style.visibility = 'visible';
}
if (page == totNumPages()) {
btn_next.style.visibility = 'hidden';
} else {
btn_next.style.visibility = 'visible';
}
}
window.onload = function() {
change(1);
};
Producción:
En este caso, la función change juega un papel fundamental a la hora de visualizar la navegación y las limitaciones de objetos por página. Además, la visibilidad de los clics prev y next en la primera y última página. Cada vez que se carga la página y después de cualquier recarga, la página predeterminada se establece en página 1.
Uso del complemento Jquery pagination.js para navegar en páginas web
El complemento Jquery ha facilitado la implementación de la paginación en las páginas web. Debe agregar el CDN para el complemento en la sección header, importando fácilmente convenciones predefinidas para abordar la creación de paginación.
En el siguiente ejemplo, definiremos un datasource. El datasource puede ser inicializado como un array, object, URL, JSON, y formatos similares. En este plugin funcionan múltiples parámetros. Por ejemplo, podemos añadir pageSize:10 para seleccionar entradas por página.
Profundicemos primero en el bloque de código.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pagination example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>
</head>
<body>
<div>
<section>
<div id="container"></div>
<div id="pagination"></div>
</section>
</div>
<script>
$(function () {
let container = $('#pagination');
container.pagination({
dataSource: [
{number: "Number 1"},
{number: "Number 2"},
{number: "Number 3"},
{number: "Number 4"},
{number: "Number 5"},
{number: "Number 6"},
{number: "Number 7"},
{number: "Number 8"},
{number: "Number 9"},
{number: "Number 10"},
{number: "Number 11"},
{number: "Number 12"},
{number: "Number 13"},
{number: "Number 14"},
{number: "Number 15"},
{number: "Number 16"},
{number: "Number 17"},
],
pageSize: 5,
callback: function (data, pagination) {
var dataHtml = '<ul>';
$.each(data, function (index, item) {
dataHtml += '<li>' + item.number + '</li>';
});
dataHtml += '</ul>';
$("#container").html(dataHtml);
}
})
})
</script>
</body>
</html>
Producción:
El código se vuelve más pequeño y el esfuerzo de generar funciones se reduce. Todo lo que requiere es concentrarse en las palabras clave o el constructor que define los parámetros especificados para cambiar la navegación de una página a otra rápidamente.
Para obtener una explicación más detallada y el uso del complemento, consulte la documentación aquí.
