Implémentation de l'affichage d'index de commande inverse des données paginées: une méthode de calcul générale

Cet article introduira en détail comment implémenter l'indexation des commandes inverses dans l'affichage des données paginées. Lorsque la pagination par défaut affiche les numéros de ligne dans l'ordre, il est parfois nécessaire d'organiser les index dans l'ordre inverse du total. En analysant les problèmes existants, nous proposerons une formule générale de calcul d'index: totalCount - ((page - 1) * limite) - index, et démontrer comment modifier la logique d'index via des exemples de code JavaScript pour atteindre facilement l'affichage d'index inverse requis, améliorant la flexibilité du rendu des données.

Comprendre les index de pagination standard

Lorsque vous traitez de grandes quantités de données, la pagination est une technique courante qui divise les données en blocs plus petits et facilement gérés (pages). Habituellement, chaque page a un indice incréments de 1, ce qui est continu entre les pages. Par exemple, si 5 éléments de données sont affichés par page, l'index de la première page est de 1 à 5, l'index de la deuxième page est de 6 à 10, etc.

Ce qui suit est un exemple de calcul de pagination et d'index JavaScript typique:

 const names = [
    "John", "Doe", "John", "Doe", "John",
    "Tim", "John", "Doe", "John", "Doe",
]]

Soit page = 1; // Numéro de page actuel LET LIMIT = 5; // Nombre de pièces affichées par page Soit totalCount = names.length || 0; // Nombre total de données // Fonction de pagination Pagination (tableau, page, limite) {
    return array.slice ((page - 1) * limite, page * limite);
}

const newArray = pagination (noms, page, limite);

// Traversé les données de la page actuelle et calculez l'index à terme newArray.ForEach ((item, index) => {
    // Formule de calcul d'index de transfert const idx = (page - 1) * limite (index 1);
    console.log ("idx:", idx, "|", "name:", item);
});

Lorsque page = 1, la sortie est la suivante:

 IDX: 1 | Nom: John
idx: 2 | Nom: DOE
idx: 3 | Nom: John
IDX: 4 | Nom: DOE
IDX: 5 | Nom: John

Lorsque page = 2, la sortie est la suivante:

 IDX: 6 | Nom: Tim
idx: 7 | Nom: John
IDX: 8 | Nom: DOE
IDX: 9 | Nom: John
IDX: 10 | Nom: DOE

Cette méthode d'indexation est intuitive et commune, mais parfois les exigences de l'entreprise nécessitent que l'index soit affiché dans l'ordre inverse.

Implémenter l'indexation de la pagination inversée

L'exigence d'indexation des commandes inverses signifie que, quelle que soit la page sur laquelle vous vous trouvez actuellement, l'index doit commencer à diminuer à partir de la valeur maximale du nombre total. Par exemple, pour un total de 10 données, 5 pièces par page:

• La première page doit afficher les index 10, 9, 8, 7, 6.
• La deuxième page doit afficher les index à 5, 4, 3, 2, 1.

Pour atteindre cet index inverse, nous devons ajuster la logique de calcul de l'index. Le noyau est que l'indice inverse de chaque élément peut être déterminé par sa position totale dans l'ensemble de données et la position relative de la page actuelle.

La nouvelle formule de calcul d'index est: idx = totalCount - ((page - 1) * limite) - index

Analysons en détail les différentes composantes de cette formule:

• TotalCount: Il s'agit du nombre total de tous les éléments de l'ensemble de données, qui représente le point de départ (maximum) de l'indice inverse.
• (Page - 1) * Limite: Cette pièce calcule le nombre total d'entrées dans toutes les pages avant la page actuelle. Par exemple, s'il s'agit actuellement de la première page (page = 1), alors cette valeur est 0; S'il s'agit actuellement de la deuxième page (page = 2), alors cette valeur est 1 * limite, c'est-à-dire le nombre d'entrées sur la première page. Il est utilisé pour déterminer le décalage de l'ordre inverse de démarrage de la page actuelle.
• INDEX: Il s'agit de l'index basé sur le zéro de l'élément actuel dans la tranche de données de la page actuelle (c'est-à-dire le paramètre d'index fourni par la boucle foreach). Il indique la position relative de l'élément actuel dans la page actuelle.

En soustrayant le nombre total d'entrées avant la page actuelle de TotalCount et en soustrayant la position relative de l'élément actuel dans la page actuelle, nous pouvons obtenir avec précision la valeur d'index de l'élément dans l'ordre inverse global.

Exemple de code d'index inversé

Voici le code JavaScript complet qui applique la formule de calcul d'index inverse:

 const names = [
  "John", "Doe", "John", "Doe", "John",
  "Tim", "John", "Doe", "John", "Doe",
]]

Soit page = 1; // Numéro de page actuel LET LIMIT = 5; // Nombre de pièces affichées par page Soit totalCount = names.length || 0; // Nombre total de données // Fonction de pagination Pagination (tableau, page, limite) {
  return array.slice ((page - 1) * limite, page * limite);
}

const newArray = pagination (noms, page, limite);

// traverse les données de la page actuelle et calculez l'index de commande inverse newArray.ForEach ((item, index) => {
  // La formule pour l'index inverse de calcul const idx = totalCount - ((page - 1) * limite) - index;
  console.log ("idx:", idx, "|", "name:", item);
});

En utilisant le code ci-dessus, lorsque Page = 1, la sortie deviendra:

 IDX: 10 | Nom: John
IDX: 9 | Nom: DOE
IDX: 8 | Nom: John
idx: 7 | Nom: DOE
IDX: 6 | Nom: John

Lorsque page = 2, la sortie deviendra:

 IDX: 5 | Nom: Tim
IDX: 4 | Nom: John
idx: 3 | Nom: DOE
idx: 2 | Nom: John
IDX: 1 | Nom: DOE

Cela implémente parfaitement l'affichage d'index inverse dont nous avons besoin.

Choses à noter

1. La précision de TotalCount: Assurez-vous que la variable TotalCount reflète toujours avec précision le nombre total réel d'entrées dans l'ensemble de données. Il s'agit de la pierre angulaire des calculs d'index inverse, et toute inexactitude conduira à des erreurs d'index.
2. Généralité: Cette logique de calcul de l'indexation inverse est générale et ne se limite pas à JavaScript. Il convient à tout langage de programmation ou cadre qui prend en charge la pagination et la boucle via les données. Adaptez simplement la formule à la syntaxe correspondante.
3. Index zéro par rapport à l'indice basé sur une seule base: dans la formule, l'index est l'indice basé sur le zéro du tableau (à partir de 0), tandis que TotalCount représente généralement le nombre total d'entrées (comptant à partir de 1). Cette formule a géré cette différence habilement sans ajustements supplémentaires.
4. Expérience utilisateur: Dans certains scénarios, l'indexation des commandes inverses peut améliorer l'expérience utilisateur, par exemple lors de l'affichage des derniers commentaires ou articles ajoutés, permettant aux utilisateurs de voir le dernier contenu (indexé le plus élevé) en un coup d'œil.

Résumer

Grâce à des ajustements simples à la formule de calcul d'index, nous pouvons implémenter de manière flexible l'indexation d'index inverse dans l'affichage des données paginées. La transformation du traditionnel (page - 1) * limite (index 1) à TotalCount - ((page - 1) * limite) - L'index rend les méthodes de présentation des données plus diverses et peut répondre aux besoins commerciaux et aux préférences des utilisateurs différents. La compréhension et l'application de cette formule est une étape clé pour maîtriser les compétences avancées d'affichage de données de pagination.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!