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

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 est page.
• [[+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]]
← pdoRessource↑ pdoToolspdoMenu →