Il y a plusieurs différences importantes par rapport au snippet getPage:
- 2 types de pagination : Saut de page et classique (selon le paramètre&pageLimite).
- La pagination n'est pas flou. Si elle est réglée pour afficher des liens de 5 pages ce sera toujours 5 et pas plus.
- Vous pouvez spécifier des chuncks à produire lorsqu'il n'y a pas de liens vers la première page, la dernière page, la page suivante ou la page précédente.
- &maxLimit ne permet pas à l'utilisateur de ralentir votre site web avec un grand nombre de chiffres dans un $_GET['limit'].
- Redirection vers la première page si il n'y a aucun résultat ou un paramètre invalide &page.
- Fonctionne avec le snippet pdoResources, par défaut.
- Prend en charge ajax.
Réglages
Nom | Défaut | Description |
---|---|---|
plPrefix | Préfixe pour les placeholders de sortie. | |
limit | 10 | Limite le nombre de ressources retournées. Utilisez "0" pour des résultats illimités. Attention si trops nombreuses |
maxLimite | 100 | La limite maximale de la requête. Remplace la limite spécifiée par l'utilisateur via une url. |
offset | Une compensation des ressources retournées par les critères de skip. | |
page | Nombre de page pour la sortie. Nombre de chevauchements spécifié par l'utilisateur via l'url. | |
pageVarKey | page | Le nom de la variable pour rechercher le numéro de page dans l'url. |
totalVar | page.total | Définir la clé d'un placeholder défini par getResources indiquant le nombre total de ressources qui seraient sélectionnées sans tenir compte de la valeur limite. |
pageLimite | 5 | Nombre de liens sur une page. Si le nombre de liens est supérieur ou égal à 7, le mode avancé est activé. |
élément | pdoResources | Le nom du snippet à exécuter. |
pageNavVar | page.nav | Nom de l'emplacement pour la pagination des résultats. |
pageCountVar | pageCount | Nom de l'emplacement pour le nombre de pages produites. |
pageLinkScheme | Schéma de génération lien vers la page. Vous pouvez utiliser les espaces réservés [[+pageVarKey]] et [[+page]] | |
cache | Caching the results of the snippet. | |
cacheTime | 3600 | Temps avant l'expiration du cache, en secondes. |
cacheAnonyme | Activer la mise en cache uniquement pour les visiteurs non autorisés. | |
àPlaceholder | If set, attribuera le résultat à ce caractère de remplacement au lieu de le produire directement. | |
ajax | Activer le support des requêtes ajax. | |
ajaxMode | Ajax pagination hors de la boîte. Disponible en 3 modes : "default", "button" et "scroll". | |
ajaxElemWrapper | #pdopage | j Sélecteur de requête pour l'élément d'emballage avec les résultats et la pagination. |
ajaxElemRows | #pdopage .rows | j Sélecteur de requête pour les éléments avec résultats. |
ajaxElemPagination | #pdopage .pagination | j Sélecteur de requête pour élément avec pagination. |
ajaxElemLink | #pdopage .pagination a | jSélecteur de requêtes pour les liens de pagination. |
ajaxElemMore | #pdopage .btn-more | jQuery selector for "load more" button in ajaxMode = bouton. |
ajaxHistoire | Enregistrez le numéro de page dans l'url lorsque vous travaillez en mode ajax. | |
frontend_js | [[+assetsUrl]]js/pdopage.min.js | Lien sur javascript pour le chargement par le snippet. |
frontend_css | [[+assetsUrl]]css/pdopage.min.css | Lien sur les styles css pour le chargement par le snippet. |
frontend_startup_js | Nom du chunk qui contient le code de script à la fin de la section de head utilisée avec le support activé des requêtes ajax. | |
frontend_init_js | Nom du chunk qui contient le code de script à la fin de la section body utilisée avec le support activé des requêtes ajax. | |
setMeta | 1 | Enregistrement des meta tags avec des liens vers la page précédente et suivante. |
mode strict | 1 | Mode strict. pdoPage ne redirige pas lors du chargement de pages inexistantes. |
Chunks | Par défaut |
---|---|
tplPage | @INLINE <li><a href="[[+href]]"> ;[[+pageNo]]</a></li> |
tplPageWrapper | @INLINE <div class="pagination"><ul class="pagination"> ;[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul></div> |
tplPageActive | @INLINE <li class="active"><a href="[[+href]]"> ;[[+pageNo]]</a>color=;/li> |
tplPageFirst | @INLINE <li class="control"><a href="[[+href]]"> ;[[%pdopage_first]]</a>/li> |
tplPageLast | @INLINE <li class="control"><a href="[[+href]]"> ;[[%pdopage_last]]</a>/li> |
tplPagePrev | @INLINE <li class="control"><a href="[[+href]]">«color=;/a></li> |
tplPageNext | @INLINE <li class="control"><a href="[[+href]]">»color=;/a></li> |
tplPageSkip | @INLINE <li class="disabled"><span> ;...</span>color=;/li> |
tplPageFirstEmpty | @INLINE <li class="disabled"><span> ;[[%pdopage_first]]</span>/li> |
tplPageLastEmpty | @INLINE <li class="disabled"><span> ;[[%pdopage_last]]</span>/li> |
tplPagePrevEmpty | @INLINE <li class="disabled"><span>«</span>color=;/li> |
tplPageNextEmpty | @INLINE <li class="disabled"><span>»</span>color=;/li> |
ajaxTplMore | @INLINE <button class="btn btn-default btn-more"> ;[[%pdopage_more]]</button> |
Ajax support
pdoPage est capable de fonctionner avec ajax out of the box. Il y a 3 conditions pour cela:
- L'option du snippet
&ajax
est activée. - Une demande a été faite avec XMLHttpRequest, par exemple une demande ajax.
- Une requête contient la variable spécifiée dans le paramètre &pageVarKey de l'appel de snippet. Par défaut, il s'agit d'un
page
.
Ainsi, il suffit d'activer le paramètre &ajax=`1` et d'envoyer une requête GET à la page avec jQuery:
$.get('document.html?page=5', fonction(response) {
console.log(réponse) ;
}, 'json');
Et vous recevrez une réponse JSON avec les résultats de la requête et les données du service : le nombre de pages en cours, le nombre total de pages et le nombre total de résultats. Étant donné que pdoPage est un snippet-wrapper, vous pouvez donc vous mettre au travail via ajax de nombreux autres snippets.
Pagination Ajax intégrée
Démarrage avec la version 1.10 pdoPage est capable de charger des pages via ajax automatiquement. Il suffit d'envelopper l'appel dans une balise spéciale:
<div id="pdopage"> ;
<div class="rows"> ;
[[!pdoPage ?
&parents=`0`
&ajaxMode=`default`
]]
</div> ;
[[!+page.nav]]
</div>
Dans un [[+page.nav]] nous avons une div avec la classe "pagination" - donc pdoPage par défaut.
Vous pouvez modifier les ID de cette mise en page avec les paramètres suivants:
-
ajaxElemWrapper - jQuery sélecteur d'emballage avec résultats et pagination. Par défaut, la pagination est
#pdopage
. - ajaxElemRows - jQuery sélecteur d'élément avec résultats. Par défaut, c'est
#pdopage .rows
-
ajaxElemPagination - jQuery sélecteur d'élément avec pagination. Par défaut, c'est
#pdopage .pagination
-
ajaxElemLink - jQuery sélecteur de liens de pagination. Par défaut, c'est
pdopage .pagination a
Les deux derniers sélecteurs espèrent que vous n'avez pas modifié le balisage standard du bloc de pagination dans le paramètre &tplPageWrapper. Toute la logique est fournie en connectant le fichier javascript du paramètre &frontent_js.
Vous n'avez pas besoin d'activer le paramètre &ajax
, non vide &ajaxMode
le fera lui-même.
Chargement par bouton
Contrairement à la pagination standard, ce type de travail suppose que l'utilisateur se déplace uniquement vers le bas, en chargeant de nouveaux éléments et déplace donc la pagination du bloc lors du défilement.
Ainsi, il sera correct de le placer en head:
<div id="pdopage"> ;
[[!+page.nav]]
color=;div class="rows"> ;
[[!pdoPage ?
&parents=`0`
&ajaxMode=`bouton`
&limit=`5`
]]
</div> ;
</div>
utilise les mêmes sélecteurs, plus:
- ajaxElemMore - jQuery sélecteur de bouton pour charger les résultats si votre &ajaxMode est "bouton". La valeur par défaut est
#pdopage .btn-more
. - ajaxTplMore - le modèle d'un bouton pour charger les nouveaux résultats lorsque ajaxMode est "button". Doit inclure le sélecteur listé dans le fichier &ajaxElemMore.
Lorsque vous cliquez sur le bouton, il charge les éléments &limit
et les ajoute à la fin du bloc de résultats. S'il n'y a plus de résultats - le bouton se cache.
La barre de navigation flottante affiche la page en cours et vous permet d'aller rapidement où vous voulez. Les clics sur ses liens ne sont pas traités via ajax, car cela semble assez difficile.
Si la sortie d'un bloc de pagination flottant n'est pas nécessaire, il suffit de le faire display:none
dans votre css.
Load on scroll
Cette méthode est très similaire à la précédente mais il n'y a pas de bouton et vous n'avez pas besoin de cliquer dessus - tout est fait automatiquement lorsque vous faites défiler la page.
<div id="pdopage">
[[!+page.nav]]
<div class="rows">
[[!pdoPage ?
&parents=`0`
&ajaxMode=`scroll`
]]
</div>
</div>
Historique-API
pdoPage prend en charge l'API d'historique dans votre navigateur. Cela signifie que lorsque &ajaxMode est activé, le snippet peut enregistrer le numéro de la page dans la barre d'adresse, de sorte que lorsque vous rechargez, rien n'est perdu. Fonctionne également correctement en utilisant les boutons de navigation "forward\back" du navigateur.
Vous pouvez modifier ce comportement en réglant &ajaxHistory en activant ou en désactivant "on" ou "off". Par défaut, il fonctionne comme suit:
- Si ajaxMode est réglé sur default, l'API d'historique est activée, le numéro de page est stocké.
- Si le mode ajaxMode est réglé sur scroll ou button, l'API d'historique est désactivée.
Quand &ajaxHistory est désactivé, le bloc de navigation est caché, ce qui fait que les pages ne peuvent pas être changées manuellement.
Callbacks Javascript
Vous pouvez spécifier les fonctions qui seront appelées avant et après le chargement de la page via ajax:
strongcallbacks['before'] = function(config) {
console.log('La configuration avant le chargement!', config) ;
} ;
pdoPage.callbacks['after'] = function(config, response) {
console.log('La configuration après le chargement!', config) ;
console.log('La réponse du serveur!', réponse) ;
}
Version 1.11.0-pl apporte la possibilité d'ajouter un gestionnaire à l'événement pdopage_load:
$(document).on('pdopage_load', function(e, config, response) {
console.log(e, config, response) ;
});
La vérification des données dans la configuration vous permettra de distinguer les différents appels de pdoPage sur une même page.
Utilisez vos propres javascripts en mode ajax
À partir de la version 2.7.4, vous pouvez utiliser vos propres javascripts en mode ajax. Les javascripts frontaux peuvent être modifiés avec les paramètres de pdoPage &frontend_js, &frontend_startup_js et &frontend_init_js. Par défaut, le javascript externe [[+assetsUrl]]js/pdopage.min.js est référencé et les balises de script correspondantes sont placées à la fin de la section head/body.
jQuery plugin
Depuis la version 2.7.4 [[+assetsUrl]]js/jquery.pdopage.min.js est disponible et pourrait être référencé dans le paramètre &frontend_js dans l'appel de snippet pdoPage. Si vous voulez l'utiliser, vous devez créer deux chunks et les référencer dans les paramètres &frontend_startup_js et &frontend_init_js.
Le chunk pour frontend_startup_js devrait rester vide et le chunk pour frontend_init_js pourrait être rempli avec le tag de script suivant:
<script type="text/javascript">
$('[[+wrapper]]').pdoPage([[+config]]) ;
</script>
Le plugin déclenche deux événements sur l'élément d'emballage. Ceux-ci pourraient être les suivants:
$('[[+wrapper]]').on('beforeLoad', fonction(event, pdopage, settings){{
console.log(settings) ;
}) ;
$('[[+wrapper]]').on('afterLoad', function(event, pdopage, settings, response){
console.log(settings) ;
console.log(réponse) ;
});
Toutes les méthodes publiques du plugin jQuery pourraient être appelées avec le code suivant:
$('[[+wrapper]]'). pdoPage('<méthode>', <comma> ; , <séparé>, <paramètres>);
Exemple d'appel avec filtrage de forme
Formulaire Le filtrage du résultat ajax de pdoPage pourrait être effectué avec le code suivant:
<script type="text/javascript">
var pdoPageWrapper = $('[[+wrapper]]') ;
pdoPageWrapper.pdoPage([[+config]]) ;
$(document).ready(function () {
$("form#my_id").on('click', 'button[type="submit"]', function(e) {
e.preventDefault() ;
var form = $(e.delegateTarget) ;
$('[[+wrapper]]').pdoPage('loadPage',
form.attr('action') + '?' + form.serialize(), 'force') ;
}) ;
}) ;
</script>
Friendly urls pagination
À partir de la version 2.2.2, vous pouvez utiliser le paramètre &pageLinkScheme pour spécifier le schéma des liens générés vers les pages. Il ne peut y avoir que deux espaces dans les paramètres:
[[+pageVarKey]]
- une variable avec le nom de la page. Par défaut, elle estpage
.[[+page]]
- le numéro de la page.
Par exemple, il suffit de spécifier un tel paramètre:
[[!pdoPage ?
&parents=`0`
&pageLinkScheme=`/[[+pageVarKey]]-[[+page]]`
]]
[[!+page.nav]]
Et vous obtiendrez des liens comme
/res/news/
/res/news/page-2
/res/news/page-3
Mais quand vous irez sur ces liens, le MODX vous montrera une erreur 404, car ces pages ne sont pas wxists. Vous devez créer le plugin pour gérer ces liens:
<?php
// Travailler uniquement avec OnPageNotFound
if ($modx->event->name == 'OnPageNotFound') {
// Obtenir la clé à partir des paramètres du système
$req = $modx->getOption('request_param_alias') ;
// Essayer d'attraper cette clé dans une request
$pageVarKey = 'page' ;
// Nous continuons uniquement si la demande correspond à notre modèle "pageVarKey-page"
if (preg_match("#.* ?({$pageVarKey}-(\d+))#", $_REQUEST[$req], $matches)) {
// Supprimez la chaîne d'enroulement et obtenez l'adresse exacte de la page actuelle
$uri = str_replace($matches[1], '', $matches[0]) ;
// Trouvez une page par cette adresse
$id = 0 ;
// D'abord, tel quel, avec la barre oblique à la fin
if (!$id = $modx->findResource($uri) {
// S'il n'y a pas de mathématiques - alors nous essayons de couper la barre oblique et de chercher à nouveau
$id = $modx->findResource(rtrim($uri, '/')) ;
}
// Si nous avons trouvé la ressource
if ($id) {
// Ajout du numéro de la page aux globals, pour que pdoPage puisse les voir
$_GET[$pageVarKey] = $_REQUEST[$pageVarKey] = $matches[2] ;
// Et chargez cette page
$modx->sendForward($id) ;
}
// Si la ressource n'a pas été trouvée, ne faites rien. Peut-être qu'un autre plugin capturera cette requête
}
}
Maintenant ce plugin va gérer la pagination de vos friendly urls.
Exemples
Comme pdoPage fait partie de pdoTools, dans le paramètre &element il contient un snippet pdoResources. Par conséquent, un simple appel du snippet montrera les ressources de l'enfant:
[[!pdoPage ?
&tpl=`@INLINE color=;p> ;[[+idx]]]<a href=[[+uri]]"> ;[[+pagetitle]]</a></p>`
]]
[[!+page.nav]]
Sortie de tous les documents disponibles du site:
[[!pdoPage ?
&tpl=`@INLINE color=;p> ;[[+idx]]]<a href=[[+uri]]"> ;[[+pagetitle]]</a></p>`
&parents=`0`
]]
[[!+page.nav]]
Inclusion de la navigation avec saut de pages. Veuillez noter que si le nombre de pages est inférieur à 7, il fonctionnera comme une navigation normale.
[[!pdoPage ?
&tpl=`@INLINE color=;p> ;[[+idx]]]<a href=[[+uri]]"> ;[[+pagetitle]]</a></p>`
&parents=`0`
&pageLimit=`7`
]]
[[!+page.nav]]
Activer le cache pendant 30 minutes:
[[!pdoPage ?
&tpl=`@INLINE color=;p> ;[[+idx]]]<a href=[[+uri]]"> ;[[+pagetitle]]</a></p>`
&parents=`0`
&pageLimit=`7`
&cache=`1`
&cacheTime=`1800`
]]
[[!+page.nav]]
Spécifiez la limite maximale de la requête. Maintenant, la limite qui n'est pas spécifiée par l'utilisateur dans l'url ne sera toujours pas supérieure à 10 résultats par page.
[[!pdoPage ?
&tpl=`@INLINE color=;p> ;[[+idx]]]<a href=[[+uri]]"> ;[[+pagetitle]]</a></p>`
&parents=`0`
&pageLimit=`7`
&cache=`1`
&cacheTime=`1800`
&maxLimit=`10`
]]
[[!+page.nav]]