Système de pagination JavaScript

0
1042

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.

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.