Pagination simple en JavaScript
- Fonction de pagination personnalisée pour paginer les pages Web
-
Utilisation du plugin
Jquerypagination.jspour surfer sur des pages Web
En JavaScript, nous définissons souvent nos portées de fonction préférées pour extraire certaines activités. La pagination en JavaScript peut être scriptée manuellement avec la combinaison de plusieurs fonctions.
Nous allons vous montrer comment créer une pagination pour surfer de page en page. Nous allons créer des fonctions de pagination de base pour le faire fonctionner, et nous verrons également un autre exemple avec le plugin jquery pagination.js qui facilitera notre expérience de codage.
Fonction de pagination personnalisée pour paginer les pages Web
Nous allons d’abord déclarer l’objet qui contient nos données. L’étape suivante consiste à compter chaque donnée et combien nous souhaitons prévisualiser sur une page. Nous obtiendrons également le nombre total de pages sur notre page Web dans ce processus.
Après que la fonction totNumPages ait calculé notre nombre total de pages, nous allons créer la fonction de base pour appuyer sur prev et next.
Vérifions le bloc de code pour avoir une conception claire.
<!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);
};
Production :
Dans ce cas, la fonction change joue un rôle essentiel dans la visualisation de la navigation et des limitations d’objets par page. Aussi, la visibilité des cliquables prev et next sur la première et la dernière page. A chaque chargement de la page et après chaque rechargement, la page par défaut est définie sur page 1.
Utilisation du plugin Jquery pagination.js pour surfer sur des pages Web
Le plugin Jquery a facilité la mise en œuvre de la pagination dans les pages Web. Vous devez ajouter le CDN pour le plugin dans la section header, en important facilement les conventions prédéfinies pour gérer la création de pagination.
Dans l’exemple ci-dessous, nous allons définir un datasource. La datasource peut être initialisée comme un array, object, URL, JSON, et d’autres formats similaires. Les paramètres multiples fonctionnent dans ce plugin. Par exemple, nous pouvons ajouter pageSize:10 pour sélectionner les entrées par page.
Creusons d’abord dans le bloc de code.
<!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>
Production :
Le code devient plus petit et l’effort de génération de fonctions est moindre. Tout ce qu’il faut, c’est se concentrer sur les mots-clés ou le constructeur définissant les paramètres spécifiés pour changer rapidement la navigation d’une page à l’autre.
Pour une explication plus détaillée et l’utilisation du plugin, consultez la documentation ici.
