5

What is the recommended way of overriding standard jPagination class to achieve ajax infinite scroll on a joomla! 3 custom component list view?

Ideally I would like to push the browser state and history after after each pagination/load of more items in the list.

I found this jQuery plugin, which claims to be simple to implement in joomla and works by overriding the pagination links - not working yet. Will post some code when I get somewhere.

Has anyone successfully achieved this?

Thanks

  • Nope, but if you find a way, please post an answer as this would be a great snippet to have – Lodder Mar 4 '15 at 17:14
1

Unfortunately, there is no feature like this in the core. But you can achieve it with template overrides till web services and pagination layout are implemented.

There is no out-of-the-box solution, but in principle you just need to alter the category view(-layout) to provide an optional "items-only"-markup. If you are not familiar with php and js you might need professional help.

0

This handy little piece of code will help with your custom component development. I am using it for infinite scrolling of items in my custom component and it works beautifully. You can combine it with simpleScoll.js to hide the scrollbars.

In essense, you loop through your items inside the scrolling div. The listener then checks the height of your container and does some math to determine when to pull another set of data from your pagination and append it to the #listings div.

<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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.