web-dev-qa-db-fra.com

Quel est le meilleur moyen d'implémenter ajax infinite scroll dans une vue de liste de composants personnalisée?

Quelle est la méthode recommandée pour remplacer la classe standard jPagination afin d’obtenir un défilement ajax infinite sur un fichier joomla! 3 vue de liste de composants personnalisés?

Idéalement, je voudrais pousser l'état et l'historique du navigateur après chaque pagination/chargement de plusieurs éléments de la liste.

J'ai trouvé ce plugin jQuery , qui prétend être simple à implémenter dans joomla et fonctionne en surchargeant les liens de pagination - ne fonctionnant pas encore. Publierai du code quand je serai quelque part.

Quelqu'un at-il réussi à atteindre cet objectif?

Merci

joomla-3.xajaxpagination
5
user2097091

Malheureusement, il n’existe aucune fonctionnalité de ce type dans le noyau. Mais vous pouvez y parvenir avec des remplacements de modèle jusqu'à la mise en œuvre des services Web et de la présentation de la pagination.

Il n'y a pas de solution prête à l'emploi, mais en principe, il vous suffit de modifier la vue catégorie (-layout) pour fournir une option "mark-only". Si vous n'êtes pas familier avec php et js, vous pourriez avoir besoin d'une aide professionnelle.

1
Nils Rückmann

Ce petit morceau de code utile vous aidera dans le développement de vos composants personnalisés. Je l'utilise pour le défilement infini d'éléments dans mon composant personnalisé et cela fonctionne à merveille. Vous pouvez le combiner avec simpleScoll.js pour masquer les barres de défilement.

Dans Essense, vous parcourez vos éléments à l’intérieur du défilement. L'auditeur vérifie ensuite la hauteur de votre conteneur et fait des calculs pour déterminer quand extraire un autre ensemble de données de votre pagination et l'ajouter à la div #listings.

<style type="text/css">#infiniteScroll{overflow:auto; height:300px; width:100%}</style>

<div id="infiniteScroll">
    <div id="items">
        <?php foreach($this->items as $item){?>
            <div class="item">
                SOME INFO THAT IS BEING DISPLAYED
            </div>
        <?php }?>
    </div>
</div>    
<div id="allShown" class="hidden">All Items have been displayed.</div>

<script type="text/javascript">
var itemsToFetch = 10;
var offset = itemsToFetch;
$('#infiniteScroll').bind('scroll', function(){
    var urlVar = '?start=';
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
        $.get(urlVar + offset, function(data){

            var items = $(data).find('#listings .listing');
            $('#listings').append(items);
            if((offset + itemsToFetch) > <?php echo $this->pagination->total;?>){
                offset += (<?php echo $this->pagination->total;?> - offset);
                $("#allShown").removeClass("hidden");
            }else{
                offset += itemsToFetch;
            }
        });
    }
});
</script>
0
Terry Carter