Pages intelligentes : Pagination avec jQuery. Pagination du texte - jQuery Auto Pagination ou pagination automatique du texte

Les plugins de pagination jQuery sont des scripts que vous pouvez intégrer à votre site pour séparer les pages et les publications en plusieurs pages distinctes. Fondamentalement, il existe deux façons de créer la pagination d'un site. Soit avec un plugin qui divise les données sur plusieurs pages après le chargement de la page, soit avec un script côté serveur où la quantité requise de données est extraite de la base de données puis chargée sur la page. La pagination peut être un bon moyen d'augmenter le nombre de pages vues sur votre site, et ainsi d'améliorer également votre taux de rebond et d'autres facteurs comportementaux pris en compte par les moteurs de recherche.

Si vous avez beaucoup de données sur vos pages, les plugins de pagination peuvent vous aider à rendre votre contenu plus convivial. Dans cet article, nous partagerons avec vous quelques plugins qui vous aideront à créer les bons paramètres de pagination pour vos sites Web. La plupart de ces plugins sont gratuits et peuvent être intégrés à n'importe quel design.

Il s'agit d'un excellent plugin jQuery de Remy Elazare qui combine la pagination et le défilement dans une interface utilisateur simple.

jpaginer

jpaginer est un plugin de pagination jQuery qui a une fonctionnalité spéciale : les numéros de page animés. L'utilisateur peut faire défiler les numéros de page disponibles en cliquant ou en passant simplement la souris sur la flèche. Liens vers le premier et dernière page aussi disponible.

Pajinate

Pajinate est un plugin jQuery simple et flexible qui vous permet de diviser de longues listes ou du contenu en plusieurs pages distinctes. Non seulement il s'agit d'une alternative simple à une implémentation côté serveur, mais le temps de chargement de la page entre les transitions de page est pratiquement nul (en supposant une taille de page raisonnable, bien sûr).

Un simple plugin de pagination jQuery avec 3 thèmes CSS.

jPListe

jPListe est un plugin jQuery flexible pour le tri, la pagination et le filtrage de tout balisage HTML (DIV, UL/LI, tableaux, etc.) - plugin premium de CodeCanyon.

Ce plugin crée un tri de contenu simple et vous permet de gérer votre contenu avec pagination ! Le tri de contenu simple offre un moyen facile d'embellir votre interface en fournissant un mécanisme de tri pratique. - Plugin Premium sur CodeCanyon

Pagination facile

Ce plugin vous permet de visualiser facilement une liste d'éléments, avec pagination. Il est très facile à mettre en œuvre et très léger, il peut donc être utile pour une utilisation dans vos propres projets.

téléavertisseur simple

téléavertisseur simple vous permet de créer une pagination avec le moins d'effort et de configuration possible. Ce plugin peut paginer les divs, les paragraphes, les éléments de liste et à peu près tout autre contenu.

plugin jQuery qui fournit nouvelle méthode la pagination de votre site Web ou de votre application. Au lieu de répertorier les numéros de page comme les méthodes traditionnelles, jqPagination utilise une sortie de pagination interactive, telle que "1 sur 5 pages", lorsqu'il est sélectionné, le plugin permet à l'utilisateur d'entrer le numéro de page souhaité. Les liens "première page", "précédent", "suivant" et "dernier" sont activés par défaut, mais peuvent être désactivés.

Si vous avez une grande liste d'éléments (par exemple, des résultats de recherche ou des actualités, des articles), vous pouvez les regrouper dans des pages distinctes et ajouter des éléments de navigation à l'aide de ce plugin.

Un autre plugin jQuery pour créer une navigation page par page. Il est attrayant, intuitif, est livré avec un curseur pour faire défiler les pages et vous pouvez ajouter un nombre illimité de pages.

Plugin jQuery permettant de créer une pagination (par différents contenus) basée non pas sur le nombre d'éléments sur la page, mais sur la hauteur de la zone de contenu.

Paginateur intelligent

Paginateur intelligent est un plugin de pagination jQuery riche en fonctionnalités qui rend l'ajout de la pagination très facile, et il est également hautement personnalisable. Smart Paginator peut également filtrer automatiquement les données côté client.

Comme son nom l'indique, il utilise Ajax pour créer la pagination sur votre site. Il ne chargera qu'une certaine partie, pas la page entière, accélérant ainsi le temps de chargement du site.

Pages douces

Pages douces est un plugin jQuery qui vous permettra de transformer une liste normale d'éléments non ordonnés en un ensemble pratique de pages avec navigation. Il peut être utilisé pour des commentaires, des diaporamas ou tout autre type de contenu structuré.

Si vous avez des questions, veuillez utiliser notre

La pagination, et si poptrosta - la pagination, est un élément important de tout site plus ou moins rempli. Divers systèmes de gestion de contenu, pour la plupart, ont des outils intégrés pour la mise en œuvre de la pagination. Il existe également de nombreux plugins séparés écrits pour cette chose utile, dans la plupart des cas, ils sont construits à l'aide de l'extension . Tous ces plug-ins, différents tant par leur style d'exécution que par leur Fonctionnalité, mais surtout, tous, c'est une excellente alternative à la mise en œuvre côté serveur de la pagination du contenu en vrac des sites.

Je propose à l'examen, à mon avis, l'un des plus faciles plugins jQuery, pour créer une pagination qui vous aide à organiser, une pagination attrayante et rapide.

Très léger, à tous égards et en poids, et tout ce qui concerne la connexion, les paramètres, vif pour créer une pagination, équipé de trois styles de conception et chargé de support.

Au fait, si vous n'êtes pas satisfait styles standards, vous pouvez utiliser , qui ne sera pas difficile à visser .css brancher.

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

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

Voyons comment utiliser le plugin étape par étape :

Étape 1Inclure jQuery

Dans le corps de la page dans la section ... vous devez connecter le framework jQuery, de préférence la version 1.7.2, ou plus récente, vous pouvez le faire en utilisant un dépôt Google spécial :

Si vous avez sur le site jQuery déjà est activé et fonctionne avec might et main, vous pouvez ignorer en toute sécurité tous les gestes décrits ci-dessus, l'essentiel est de vous assurer que la version de jQuery n'est pas trop dense. Dans WordPress, au fait, tout va bien.
Ensuite, nous connectons notre bourreau de travail- brancher jquery.simplePagination.js:

Vous ne pouvez pas clôturer le jardin, mais sélectionnez simplement le style dont vous avez besoin, clair, foncé ou compact et insérez le jeu de règles dans le fichier .css de votre modèle. Prescrivez votre propres styles Ou utiliser Amorcer, également une option, en termes d'originalité et de développement des compétences de construction de site, encore plus préférable.

Étape 3 HTML

Pour afficher la barre de pagination sur les pages du site, là où vous comptez la placer, c'est plus logique et le plus souvent, c'est en bas du contenu principal, vous devez écrire ceci :
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 #light-pagination pour la pagination du thème clair, mais 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 style css.
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 modification :

éléments- Le nombre total d'éléments qui seront utilisés pour calculer les pages. Défaut: 1 .
itemsOnPage- Le nombre d'éléments affichés sur chaque page. Défaut: 1 .
pages- Optionnel. Si une valeur est spécifiée, les options items et itemsOnPage sont ignorées. Définit le nombre de pages dans la liste.
Pages affichées- Combien de numéros de page doivent être visibles pendant la navigation. Valeur minimale autorisée : 3 , 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 .
page actuelle- Quelle page sera sélectionnée immédiatement après le lancement. Logiquement, la valeur par défaut est : 1 .
hrefTextPrefix- La chaîne utilisée dans l'attribut HREF est ajoutée avant le numéro de page. Défaut: "#page".
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. Défaut: "préc".
texte suivant— Texte du bouton pour la page suivante. Défaut: Prochain
style css- Définir le style CSS. Défaut: "thème lumière"
sélectionnerSurClic- Sélection de page après avoir cliqué, par défaut - activé ( vrai), je n'ai pas compris pourquoi le désactiver, mais il y a une telle opportunité, la valeur est "fausse".

Nous avons couvert les paramètres les plus élémentaires. O caractéristiques supplémentaires et méthodes disponibles Vous pouvez découvrir comment utiliser ce plugin en lisant la documentation directement sur la page du développeur.

Il ne me reste plus qu'à vous souhaiter bonne chance et réussite dans la réalisation de vos nouveaux projets.

Vous pouvez utiliser la navigation tactile et par balayage de la souris
Vous pouvez utiliser différents types de changements de pages
L'état de la page active est enregistré dans l'API History
Vous pouvez utiliser différents ensembles de contrôles : chiffres, flèches, point, barre de progression et un champ pour entrer la page souhaitée.
Vous pouvez utiliser l'un des thèmes prêts à l'emploi
Vous pouvez améliorer l'apparence non seulement du texte, mais aussi des images ou des listes
En utilisant un grand nombre de paramètres et de méthodes différents, tu peux créer un bonbon au lieu d'un texte ennuyeux

JEUX D'ÉLÉMENTS DE CONTRÔLE

Classic of Pagination se compose d'un ensemble de boutons, tels que "Accueil", "Précédent", "Suivant", "Dernière page" et bien sûr - les numéros de page. Se compose également d'un bloc d'état de la page. Chaque élément est un élément séparé et indépendant, qui peut être affiché n'importe où sur la page ou ne pas s'afficher du tout.

Pour accéder rapidement à la page souhaitée, entrez le numéro de page dans la case et cliquez sur "OK".

Cet ensemble est une navigation parfaite adaptée à un petit nombre de pages, lorsqu'il suffit de tourner les pages d'avant en arrière

Il s'agit de la vue la plus minimaliste des contrôles, similaire à celle que vous aviez l'habitude de voir dans les curseurs.

Ce contrôle est utile si vous avez besoin d'avoir un accès rapide à toutes les pages. Ce type de champ convient aux gros textes, et aux petits messages

Ce type de contrôle est minimisé en raison de l'absence de boutons avec des numéros de page.

Il s'agit d'un look élégant et moderne de la gestion des pages. Il prend très peu de place, mais il est très fonctionnel.

Ce n'est pas un type standard de pagination. Avec il est possible d'estimer le pourcentage de pages lues.

Éléments de contrôle non nécessaires pour s'enregistrer dans le plugin. Vous pouvez ajouter manuellement n'importe quel contrôle à n'importe quel emplacement de code, mais il est nécessaire de spécifier le nom unique du bloc de pagination dans l'attribut data-href et l'identifiant de transition. En tant que bouton de contrôle, vous pouvez utiliser n'importe quel élément html : a, button, span, div, img et autre.

Cet ensemble de contrôles combine le look classique et un bloc pour la transition bystoro vers la page spécifique.

TYPE DE CONTENU

Si vous utilisez un plug-in pour bloquer qui ne contient que des nœuds de texte, le texte sera divisé en parties par des points s'ils sont dans le texte. Si le texte n'est pas des points, pour la séparation du texte, vous devez spécifier le caractère dans le paramètre "splitSymbols", tel que l'espace, la lettre ou autre

Si vous utilisez un plug-in pour bloquer qui contient des balises de paragraphes ou d'autres balises html avec du texte, le texte sera divisé en parties par ces balises html.

Le plugin se divise également sur la page en tant que balises pour le formatage des balises de texte et d'image. Gardez un œil sur le comportement de la hauteur de l'image à l'aide des styles CSS

la liste est divisée comme les autres balises. La chose la plus importante est que la liste des éléments est un enfant de l'élément d'initialisation

PLUS DE DÉMOS

Sur une page peut être plusieurs blocs avec navigation de page. Et chacun de ces blocs peut avoir vos paramètres

Ce paramètre précise le numéro de la page à afficher après le premier site de téléchargement

Les sites Web contiennent généralement plusieurs pages. Ils peuvent être situés sur 3 à 5 pages, par exemple, sur la page de destination, et peut-être plus, beaucoup plus.

Chaque bon site doit contenir une navigation qui permettra à l'utilisateur de naviguer et de se déplacer correctement entre les pages du site. Vous pouvez créer une telle pagination en utilisant JavaScript. Dans cet article, nous allons parler de la façon de créer une telle navigation.

Autre chose, en plus du JavaScript normal, Bootstrap 4 est utilisé dans l'exemple. pagination bootstrap combiné avec la bibliothèque JQuery, à savoir le plugin spécial Buzina Pagination. Il vous permet de décomposer toutes les informations en plusieurs pages avec la création d'une navigation entre elles.

Connecter les frameworks nécessaires

Pour travailler avec Bootstrap et JQuery, vous devez les inclure. Cela peut être fait dans votre Document HTML, à l'aide de balises