Comme vous avez surement remarquer si vous avez essayez d’ajouter plusieurs valeurs dans une array c’est que la liste risque de devenir plutôt longue, dans cette vidéo nous allons voir comment créer une pagination dans JavaScript.
Le fichier html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Pagination</title>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>name</th>
</tr>
</thead>
<tbody id="letterList">
</tbody>
</table>
<div>
<button class="btn" onclick="firstPage()">|<</button>
<button class="btn" onclick="previous()">
<</button>
<span id="pageInfo"></span>
<button class="btn" onclick="nextPage()">></button>
<button class="btn" onclick="lastPage()">>|</button>
</div>
</div>
<script src="code.js"></script>
</body>
</html>
Création de notre array et l’afficher
Nous allons commencer par créer une array de lettre comme suite
let letterList = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
Puis nous allons afficher notre array avec une fonction que nous allons nommer showlist() ;
function showList(){
let tableList = "";
for(let i = 0; i < letterList.lenght();i++){
console.log(i);
if(i<letterList.length){
tableList += `
<tr>
<td>${letterList[i]}</td>
</tr>
`
}
}
document.getElementById('letterList').innerHTML=tableList;
showPageInfo();
}
Afficher que les 5 premières lettres
Afin d’afficher les 5 premières lettres nous allons créer une variable que nous allons nommer numberOfItems et l’ajouter à noter boucle for comme suite
for(let i = 0; i < numberOfItems;i++)
Afficher les 5 prochaine lettre
Désormais que nous avons vue comment afficher uniquement 5 lettres nous allons voir comment afficher les 5 prochaine lettre, pour cela nous allons devoir créer une variable qui va nous servir de définir la première lettre et puis le limiter a 5. Comme suite.
for(let i = first; i < first + numberOfItems;i++){
Voila nous savons comment afficher le nombre de lettre il est temps de créer nos boutons afin qu’un utilisateur puisse le faire luis même.
Afficher les prochaines lettres
Sur le bouton Next nous avons une fonction Next qui nous permet d’afficher les prochaines lettres et nous allons bien sure devoir vérifier que nous ne somme pas à la fin de notre liste. Et nous allons aussi afficher sur quelle page nous somme.
function nextPage(){
if(first+numberOfItems<=letterList.length){
first+=numberOfItems;
actualPage ++;
showList();
}
}
Retourner en arrière
Le principe reste le même sauf que cette fois si nous allons contrôler que si le résultat est plus petit que 0 alors on ne fait rien sinon on retourne en arrière.
function previous(){
if(first-numberOfItems >= 0){
first-=numberOfItems
actualPage --;
showList();
}
}
Afficher la première page
Affin d’afficher la première page c’est plutôt simple on indique le first à 0
function firstPage(){
first = 0
actualPage = 1;
showList();
}
Afficher la dernière page
Ici nous allons créer une nouvelle variable qui nous indiquera la dernière page. Puis nous allons dire que nous voulons que la première page soit la dernière page x le nombre de lettre que nous avons afficher – le nombre de lettre pour avoir la première lettre de notre dernière page.
let maxPages = Math.ceil(letterList.length / numberOfItems );
function lastPage(){
first = (maxPages * numberOfItems)-numberOfItems;
actualPage = maxPages;
showList();
}
Afficher les informations de page
Pour finir nous allons afficher nos informations de page avec la fonction showPageInfo(). Ici rien de spéciale nous allons uniquement indiquer les valeurs de la page actuelle et la page max
function showPageInfo(){
document.getElementById('pageInfo').innerHTML = `
Page ${actualPage} / ${maxPages}
`
}
Conclusion
Voilà voilà nous avons créé ensemble un system de pagination avec JavaScript je vous fais confiance pour l’améliorer et le partage avec le reste de la communauté. D’ici là je vous souhaite bonne chance.
bonjour et merci;
dans la fonction showList() erreur length et non lenght