Dans cet article, nous examinerons le processus de création d'un élément d'interface Web tel qu'un bloc de navigation pour la pagination. Dans Bootstrap 3 et 4, cet élément d'interface utilisateur est implémenté à l'aide du composant Pagination.

Qu'est-ce que la pagination ?

La pagination est un affichage page par page des données. Ceux. Il s'agit du type de sortie dans lequel les données ne sont pas sorties en une seule fois, mais par petites parties (pages).

Un bloc de navigation permet de naviguer dans ces parties (pages).

Le composant Pagination du framework Bootstrap est précisément conçu pour créer cet élément d'interface, c'est-à-dire bloc de navigation.

Création d'un bloc de navigation pour la pagination

Dans Bootstrap 3, la barre de navigation a la structure suivante :

• Précédent
• 1
• 2
• 3
• Suivant

L'élément nav de ce fragment agit comme un conteneur wrapper. Il est nécessaire dans cette structure uniquement pour que les technologies d'assistance perçoivent ce fragment de code HTML comme une navigation.

De plus, il est conseillé que les technologies d'assistance expliquent également de quel type de bloc de navigation il s'agit. Cette action est réalisée à l'aide de l'attribut aria-label.

Le balisage du bloc de navigation pour la pagination dans Bootstrap se fait à l'aide d'une liste à puces. Chaque lien de navigation dans ce bloc est un élément a enveloppé dans un li et placé dans un ul .

La conception visuelle du bloc de navigation dans Bootstrap se fait à l'aide de la classe de pagination, qui doit être ajoutée au fichier ul.

Structure des blocs de navigation dans Bootstrap 4 :

• Précédent
• 1
• 2
• 3
• Suivant

Notez que dans Bootstrap 4, vous devez ajouter des classes aux éléments li et a. K li est la classe d'élément de page et k a est le lien de page. Ces classes définissent les styles CSS pour les éléments et sont nécessaires au bon affichage du bloc de navigation.

Utiliser des icônes au lieu d'inscriptions de texte

Un exemple de barre de navigation pour la pagination qui utilise des icônes comme contenu de certains liens :

• D'abord
• " Précédent
• 1
• 2
• 3
• " Suivant
• Dernier

Changer l'état d'un lien de navigation

La modification de l'état des liens dans une barre de navigation se fait à l'aide des classes désactivées et actives. La première classe (désactivée) est utilisée pour créer un lien non actif (non cliquable). La deuxième classe ( active ) est requise pour mettre en évidence (indiquer) la page en cours. Vous devez ajouter les classes actives et désactivées non pas au lien lui-même, mais à l'élément li.

• Précédent
• 1
• 2
• 3
• Suivant

• Précédent
• 1
• 2
• 3
• Suivant

La classe désactivée définit des liens vers la déclaration CSS pointer-events: none . Cette annonce a pour but de désactiver la fonctionnalité du lien. Mais cela ne désactive pas la transition vers celui-ci à l'aide du clavier. Par conséquent, si vous souhaitez désactiver complètement la fonctionnalité de ces liens dans votre projet, vous devez également les suivre à l'aide de JavaScript et leur ajouter l'attribut tabindex="-1".

Une autre façon de désactiver la fonctionnalité de lien consiste à ne pas utiliser l'élément a.

• Précédent
• 1
• 2
• 3
• Suivant

Redimensionner le bloc de navigation

Dans Bootstrap 3 et 4, vous pouvez redimensionner le bloc de navigation à l'aide des classes pagination-lg et pagination-sm. Cela se fait en ajoutant l'une de ces classes à la classe de pagination.

La première classe (pagination-lg) est utilisée lorsqu'il faut augmenter la taille de la navigation, et la seconde (pagination-sm) lorsqu'il faut la réduire.

• Précédent
• 1
• 2
• 3
• Suivant

• Précédent
• 1
• 2
• 3
• Suivant

Alignement des blocs de navigation

Dans Bootstrap 3, l'alignement de la barre de navigation pour la pagination est effectué à l'aide de classes d'alignement de texte.

Dans Bootstrap 4, l'alignement de la barre de navigation pour la pagination se fait à l'aide de classes flex.

Composant de téléavertisseur (Bootstrap 3)

Pager est un composant Bootstrap 3 conçu pour créer une navigation simple entre les pages ou tout autre contenu du site. Ce composant se compose de 2 boutons (liens).

L'une des utilisations les plus courantes de cette navigation consiste à faire en sorte que le premier bouton navigue vers une publication plus récente sur le site et le second vers une publication plus ancienne.

Syntaxe du composant pager :

• Précédent
• Suivant

Changer la disposition des boutons

Par défaut, les boutons des composants Pager sont centrés. Mais outre cette option, Bootstrap 3 vous permet également de les aligner sur différents bords. Cela se fait en ajoutant la classe précédente au premier bouton et à côté du second. La classe précédente aligne le lien vers la gauche et la suivante – vers la droite.

• Précédent
• Suivant

Désactiver la fonctionnalité du bouton

La définition d'un bouton sur un état désactivé se fait en y ajoutant la classe désactivée.

• ← Précédent
• Suivant →

La pagination, ou si popprost - la navigation dans les pages, est un élément important de tout site Web plus ou moins complet. Divers systèmes de gestion de contenu disposent pour la plupart d’outils intégrés pour mettre en œuvre la pagination. Il existe également de nombreux plugins distincts écrits pour cette tâche utile ; dans la plupart des cas, ils sont construits à l'aide du fichier . Tous ces plugins sont différents dans leur style et leurs fonctionnalités, mais plus important encore, ils constituent tous une excellente alternative à la mise en œuvre côté serveur consistant à diviser le contenu volumineux des sites en pages.

Je propose à considérer, à mon avis, l'un des plugins jQuery les plus simples pour créer une navigation de page, qui vous aidera à organiser une pagination attrayante et rapide.

Très léger à tous égards, tant au niveau du poids que de tout ce qui concerne la connexion, les réglages, rapide pour la création de pagination, doté de trois styles de design et chargé de support.

D'ailleurs, si vous n'êtes pas satisfait des styles standards, vous pouvez utiliser, qui ne seront pas difficiles à attacher au .css du plugin.

Voyons maintenant de plus près comment connecter correctement le plugin lui-même et le fichier de style au document, c'est-à-dire l'implémenter directement sur les pages du site et parcourir les paramètres du plugin disponibles.

Pour commencer, bien sûr, vous devez disposer d'un plugin, c'est-à-dire avec des sources, dans lesquelles le javascript jquery lui-même et le fichier de style css sont soigneusement emballés.

Voyons comment utiliser le plugin étape par étape :

Étape 1 : Connectez jQuery

Dans le corps de la page, dans la section ..., vous devez connecter le framework jQuery, de préférence version 1.7.2, ou plus récente, cela peut se faire à l'aide d'un référentiel spécial Google :

Si jQuery est déjà activé sur votre site et que vous travaillez à pleine vitesse, vous pouvez ignorer en toute sécurité tous les mouvements décrits ci-dessus, l'essentiel est de vous assurer que la version de jQuery n'est pas trop dense. Soit dit en passant, dans WordPress, tout va bien.
Ensuite, nous connectons notre bête de somme - le plugin jquery.simplePagination.js :

Vous n’avez pas à vous en soucier, mais sélectionnez simplement le style dont vous avez besoin, clair, foncé ou compact, et collez un ensemble de règles dans le fichier styles.css de votre modèle. Enregistrer vos propres styles ou utiliser Bootstrap est également une option, en termes d'originalité et de développement des compétences en matière de création de sites, encore plus préférable.

Étape 3. HTML

Pour afficher le panneau de navigation des pages sur les pages du site, là où vous envisagez de le placer, plus logiquement et le plus souvent, c'est-à-dire en bas du contenu principal, vous devez écrire ce qui suit :
Pour un fond clair :

Thème compact :

$(function() ( $(#light-pagination).pagination(( items : 100, itemsOnPage : 10, cssStyle : "light-theme" )); ));

Dans l'exemple, j'ai utilisé l'initialisation pour la pagination du thème clair #light-pagination , vous pouvez changer le sélecteur en un autre, pour compact c'est #compact-pagination , ou pour le style sombre #dark-pagination . Dans ce cas, n'oubliez pas de changer la classe dans la fonction cssStyle.
Comme je l'ai déjà écrit ci-dessus, le plugin est très flexible dans les paramètres, les options suivantes sont disponibles pour le changement :

• items — Le nombre total d'éléments qui seront utilisés pour calculer les pages. Par défaut : 1.
• itemsOnPage — Le nombre d'éléments à afficher sur chaque page. Par défaut : 1.
• pages — Facultatif. Si une valeur est spécifiée, les options items et itemsOnPage sont ignorées. Définit le nombre de pages dans la liste.
• displayPages — Combien de numéros de page doivent être visibles pendant la navigation. Valeur minimale autorisée : 3, par défaut : 5.
• bords — Combien de numéros de page sont visibles au début et à la fin de la numérotation. Valeur par défaut : 2.
• currentPage — Quelle page sera sélectionnée immédiatement après le lancement. Valeur logique par défaut : 1.
• hrefTextPrefix - La chaîne utilisée dans l'attribut HREF est ajoutée avant le numéro de page. Page par défaut- " .
• hrefTextSuffix — La chaîne utilisée dans l'attribut HREF est insérée après le numéro de page. La valeur par défaut est une chaîne vide.
• prevText — Texte du bouton vers la page précédente. Par défaut : "Précédent".
• nextText — Texte du bouton vers la page suivante. Par défaut : "Suivant"
• cssStyle - Définit le style CSS. Par défaut : "thème clair"
• selectOnClick - Sélection d'une page après avoir cliqué, par défaut - activé (vrai), je ne comprends toujours pas pourquoi la désactiver, mais il existe une telle option, valeur : "false".

Nous avons examiné les paramètres les plus élémentaires. Vous pouvez en apprendre davantage sur les fonctions supplémentaires et les méthodes disponibles pour utiliser ce plugin en étudiant la documentation directement sur la page du développeur.

Tout ce que je peux faire, c'est vous souhaiter bonne chance et succès dans la réalisation de vos nouveaux projets.

La pagination, y compris la navigation dans les pages, est une chose assez simple, mais les débutants ont souvent du mal à la créer, et surtout, à comprendre son fonctionnement...

L'une des tâches de la pagination est la sortie simultanée non pas de tous les éléments, mais d'un nombre limité d'entre eux, disons, pas plus d'éléments $pp, et le groupe particulier d'éléments à afficher dépend du paramètre d'entrée $pn - le nombre d'éléments ce groupe. Ce numéro est en fait le numéro de page. Ici, vous avez besoin d'une requête comme celle-ci :

SELECT * FROM `table` LIMITE ($pn-1)*$pp),($pp)

La valeur de $pn est diminuée de 1 de sorte que, par exemple, pour la première page de la liste avec une valeur de $pp égale à 10, les éléments de 0 à 9 sont sélectionnés, et non de 10 à 19. Naturellement, si les pages sont numérotées à partir de zéro, la valeur de $ est diminuée de 1 pn et n'est pas nécessaire dans la requête.

Pour résoudre le problème suivant, à savoir la navigation dans les pages, vous devez d'abord connaître le nombre total de pages dans la liste. Pour ce faire, vous pouvez d’abord interroger le nombre total d’éléments. Ou, directement dans la requête, calculez le nombre total de pages en fonction du nombre total d'éléments :

SELECT FLOOR((COUNT(*)+($pp-1))/($pp)) FROM `table`

Pour obtenir le nombre total de pages $pc, la formule assez connue $pc=(count+per_page-1) div per_page est utilisée ici, mais ajustée pour utiliser la fonction FLOOR au lieu de la division entière (div). Vous pouvez également utiliser l'opérateur DIV, qui est pris en charge dans MySQL depuis un certain temps.

Si vous n'avez besoin d'afficher qu'un seul élément par page, les requêtes ci-dessus peuvent être simplifiées.

Une fois le nombre total de pages $pc obtenu, vous pouvez immédiatement afficher des liens vers toutes les pages de la liste à l'aide d'une boucle avec un compteur compris entre 1 et $pc , cependant, une navigation plus sophistiquée est généralement utilisée, dans laquelle des liens toutes les pages ne sont pas affichées simultanément, mais uniquement les pages dont les numéros sont dans une plage limitée en fonction du numéro de page actuel. Par exemple, voici les formules permettant d'obtenir les valeurs limites de plage de $first et $last pour ce que l'on appelle la navigation bancaire :

$first=$pn-1-($pn-2)%$range ; $last=$first+$range$pc) erreur (404); elseif ($result=mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$ pn-1-($pn-2)%$range; $last=$first+$range>