septembre 8, 2022

Implémentation de la pagination de la table de données avec Kendo UI pour Vue

L’interface utilisateur de Kendo pour Vue simplifie la pagination avec le composant Pager. Voyons comment l’utiliser.

Il existe de nombreux types de sites Web qui récupèrent et affichent certains types de données aux utilisateurs, par exemple, des articles de blog, des recettes, des actualités, etc. Un site Web peut avoir des milliers d’enregistrements dans une base de données qui peuvent être affichés à ses utilisateurs. Cependant, il serait très inefficace de tout récupérer et de tout afficher. C’est pourquoi, généralement, les données sont récupérées par blocs, puis affichées à l’aide de techniques telles que la pagination ou le défilement infini.

Dans cet article, nous expliquerons comment implémenter la pagination côté client avec Interface utilisateur de Kendo pour Vue.

Pagination de la table de données avec Kendo UI pour Vue

Vous pouvez trouver l’exemple de code complet dans ce dépôt GitHub. Ci-dessous, vous pouvez également trouver un exemple interactif de StackBlitz.

Configuration du projet

Nous allons utiliser Vite pour échafauder rapidement un nouveau projet Vue. Si vous n’avez jamais entendu parler de Vite auparavant, vous voudrez peut-être consulter l’un de mes articles à ce sujet—Qu’est-ce que Vite : le guide des outils de projet modernes et ultra-rapides.

Exécutez la commande ci-dessous dans votre terminal pour créer un nouveau projet de réaction.

$ npm init vite kendo-vue-data-table-pagination -- --template vue

Une fois la création du projet terminée, exécutez les commandes suivantes pour accéder au répertoire du projet et installer toutes les dépendances.

$ cd kendo-vue-data-table-pagination && npm install

Enfin, vous pouvez démarrer le serveur de développement en exécutant le npm run dev commande.

Vous devriez voir le projet en cours d’exécution lors de la visite localhost:3000 dans votre navigateur. Ensuite, installons toutes les bibliothèques de Kendo dont nous aurons besoin pour ce projet.

$ npm install --save @progress/kendo-vue-data-tools @progress/kendo-vue-intl @progress/kendo-vue-buttons @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-data-query @progress/kendo-theme-default @progress/kendo-licensing

Une fois l’installation terminée, nettoyons le App composant et son fichier de styles. Remplacer le contenu du App.vue fichier avec le code ci-dessous.

src/App.vue

<template>
  <div :id="$style.app">
    <h1>Posts</h1>
  </div>
</template>

<script setup></script>

<style module>
#app {
  text-align: center;
  color: #2c3e50;
  max-width: 1180px;
  margin: 50px auto;
}
</style>

Enfin, importons le thème Kendo dans le main.js dossier.

src/main.js

import { createApp } from 'vue';
import '@progress/kendo-theme-default/dist/all.css';
import App from './App.vue';

createApp(App).mount('#app');

Voilà pour la configuration initiale.

Avant d’ajouter la fonctionnalité de pagination, nous avons en fait besoin d’avoir des données à paginer en premier. À des fins de démonstration, nous utiliserons le jsonplaceholder API pour récupérer une liste de messages que nous pouvons ensuite paginer.

src/App.vue

<template>
  <div :id="$style.app">
    <h1>Posts</h1>
    <table class="k-table k-table-layout-fixed">
      <thead class="k-table-thead">
        <tr class="k-table-row">
          <th class="k-table-th">Post ID</th>
          <th class="k-table-th">User ID</th>
          <th class="k-table-th">Title</th>
          <th class="k-table-th">Excerpt</th>
        </tr>
      </thead>
      <tbody class="k-table-tbody">
        <tr class="k-table-row" v-for="post of allPosts" :key="post.id">
          <td class="k-table-td">{{ post.id }}</td>
          <td class="k-table-td">{{ post.userId }}</td>
          <td class="k-table-td">{{ post.title }}</td>
          <td class="k-table-td">{{ post.excerpt?.slice(0, 50) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
const allPosts = ref([]);

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(json => {
    allPosts.value = json.map(item => {
      return {
        ...item,
        excerpt: item.body.slice(0, 50),
      };
    });
  });
</script>

<style module>
#app {
  text-align: center;
  color: #2c3e50;
  max-width: 1180px;
  margin: 50px auto;
}
</style>

Nous récupérons une liste de messages, qui sont définis sur le allPosts réf. Dans le templateun tableau à quatre colonnes est rendu—Post ID, User ID, Title et Excerpt. La jsonplaceholder L’API renvoie 100 messages ; par conséquent, si vous jetez un coup d’œil sur le site Web maintenant, vous verrez que le tableau est assez grand. Traitons-le en utilisant le Pager composant proposé par Kendo UI pour Vue.

src/App.vue

<template>
  <div :id="$style.app">
    <h1>Posts</h1>

    <table class="k-table k-table-layout-fixed">
      <thead class="k-table-thead">
        <tr class="k-table-row">
          <th class="k-table-th">Post ID</th>
          <th class="k-table-th">User ID</th>
          <th class="k-table-th">Title</th>
          <th class="k-table-th">Excerpt</th>
        </tr>
      </thead>
      <tbody class="k-table-tbody">
        <tr class="k-table-row" v-for="post of posts" :key="post.id">
          <td class="k-table-td">{{ post.id }}</td>
          <td class="k-table-td">{{ post.userId }}</td>
          <td class="k-table-td">{{ post.title }}</td>
          <td class="k-table-td">{{ post.excerpt?.slice(0, 50) }}</td>
        </tr>
      </tbody>
    </table>
    <div class="k-mt-8">
      <Pager
        :skip="skip"
        :take="take"
        :total="allPosts.length"
        :buttonCount="5"
        type="numeric"
        :pageSizes="[5, 10, 20]"
        info
        previousNext
        @pagechange="onPageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { Pager } from "@progress/kendo-vue-data-tools";

const skip = ref(0);
const take = ref(10);
const allPosts = ref([]);
const posts = computed(() =>
  allPosts.value.slice(skip.value, skip.value + take.value)
);

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(json => {
    allPosts.value = json.map(item => {
      return {
        ...item,
        excerpt: item.body.slice(0, 50),
      };
    });
  });

const onPageChange = event => {
  skip.value = event.skip;
  take.value = event.take;
};
</script>

<style module>
#app {
  text-align: center;
  color: #2c3e50;
  max-width: 1180px;
  margin: 50px auto;
}
</style>

Assumons ce qui se passe exactement. Après les importations, nous avons trois références et une prop calculée.

const skip = ref(0);
const take = ref(10);
const allPosts = ref([]);
const posts = computed(() =>
  allPosts.value.slice(skip.value, skip.value + take.value)
);

La skip et take les valeurs sont utilisées par le Pager composant pour comprendre la page actuelle. Par exemple, si skip est réglé sur 0 et take équivaut à 10, la première page s’affiche. Si skip serait 30puis le Pager serait sur la quatrième page.

La allPosts ref stockera tous les messages extraits de la jsonplaceholder API. La posts calculé utilise le skip et take valeurs pour obtenir uniquement un sous-ensemble de données pour la page sur laquelle nous nous trouvons.

De plus, nous avons le code pour récupérer les messages et le onPageChange méthode transmise au Pager composant. Nous l’utilisons pour mettre à jour skip et take réf.

const onPageChange = event => {
  skip.value = event.skip;
  take.value = event.take;
};

Finalement, le Pager composant reçoit quelques accessoires. Nous avons déjà couvert ce que skip, take et pageChange faire, alors concentrons-nous sur le reste des accessoires :

total – Le nombre total d’éléments à paginer.
buttonCount – Le nombre de boutons de page qui doivent être affichés.
pageSizes – Un tableau avec des nombres qui spécifient les options pour les éléments par liste déroulante de page. Fournir le [5, 10, 20] array permettra aux utilisateurs de modifier le nombre d’éléments affichés.
type – La Pager le composant prend en charge deux types différents—numeric et input. Passer le numeric le type entraînera le Pager composant à l’aide de boutons pour les numéros de page. D’autre part, en passant le input type remplacera les boutons de page par un champ de saisie.
info – Indique si le Pager doit afficher le nombre d’éléments actuellement affichés sur le total.
previousNext – Configuré si les boutons précédent et suivant doivent être affichés.

<Pager
	:skip="skip"
	:take="take"
	:total="allPosts.length"
	:buttonCount="5"
	:pageSizes="[5, 10, 20]"
  type="numeric"
	info
	previousNext
	@pagechange="onPageChange"
/>

C’est ça. Si vous visitez le site Web, vous devriez voir que nous avons maintenant une table de travail avec pagination !

Emballer

La Pager Le composant proposé par Kendo UI pour Vue est un outil utile pour implémenter rapidement la pagination côté client. En plus d’être facile à utiliser, il est également réactif, il peut donc être utilisé dans n’importe quel projet. Interface utilisateur de Kendo pour Vue est un excellent choix car il offre de nombreux composants riches en fonctionnalités et prêts pour la production qui peuvent accélérer considérablement le développement.

Source link

Blog ARC Optimizer

Configuration du projet

Emballer

Partager :

Articles similaires