Keyword

K2 - AJAX Pagination - load more items

More
8 months 3 weeks ago #167045 by Zed
Zed created the topic: K2 - AJAX Pagination - load more items
Hi!
does anyone wonder how can i achieve this, loading more items in AJAX, like start with 4, then 8, 12, 16, etc....(loading 4 items each time)
some plugins do that, but are very limited, and not really suitable for custom k2 templates....
any sugestions?
thks!
zed

Please Log in or Create an account to join the conversation.

More
8 months 3 weeks ago #167052 by Krikor Boghossian
Krikor Boghossian replied the topic: K2 - AJAX Pagination - load more items
Hello,

Unfortunately you will have to use a custom JS Script.
A nice infinite scrolling plugin is imakewebthings.com/waypoints/shortcuts/infinite-scroll/

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

---
JoomlaWorks
www.joomlaworks.net/

Please Log in or Create an account to join the conversation.

More
8 months 3 weeks ago #167077 by willburn
willburn replied the topic: K2 - AJAX Pagination - load more items
I am also interrested in this. I did have a look at the link you provided, exactly what i was looking for. Anyone have a short guide how to make this happen in joomla with k2?

Please Log in or Create an account to join the conversation.

More
8 months 3 weeks ago - 8 months 3 weeks ago #167079 by Zed
Zed replied the topic: K2 - AJAX Pagination - load more items
Hi Krikor tks for the reply.
well, that was exactly what i thought (developing a custom JS) since the existing plugins give more problems than solutions.

so here it goes: (credits to my good old friend Nuno Costa (codehaha.com).

1. In you category definitions, define the amount of items to show in the beginning;
2. hide the default pagination;
3. In your custom (or default) category.php at the bottom of the page (outside the main k2 container div) add this code:
(attention to the vars, that define the number of items to fetch, as well as the button that makes the call)

<script>
$ = jQuery;
var url = '?start=';
var itemsToFetch = 4;
var cursor = itemsToFetch;

var newsContainer = 'itemListPrimary';
var buttonEl = $('#btn-show-more');

buttonEl.on ('click', function(evt){
evt.preventDefault();

$.get( url + cursor, function( data ) {
var items = $(data).find('#' + newsContainer);
if ( items.children().length == 0) {
buttonEl.hide();
}
$( '#' + newsContainer ).append( items );
cursor += itemsToFetch
});

});
</script>


3. Below the pagination block put your button:

<!-- AJAX load more btn --->
<div class="loadmorewrapper">
<a id="btn-show-more" href="<?php echo JRoute::_('&start=' . ( ($this->pagination->pagesCurrent) * $this->pagination->limit) ); ?>"><span class="icone"><i class="fas fa-plus-circle"></i></span></a>
</div>


and that's it :)

works fine and clean, and you can put this in every k2 category.php template , it will render exactly the same as you define you category_item.php

enjoy!
Last Edit: 8 months 3 weeks ago by Zed. Reason: errors

Please Log in or Create an account to join the conversation.

More
8 months 3 weeks ago - 8 months 3 weeks ago #167082 by willburn
willburn replied the topic: K2 - AJAX Pagination - load more items
Wow, great!

I tried this, added exactly as described above, work perfectly.

Thanks for sharing!
Last Edit: 8 months 3 weeks ago by willburn.

Please Log in or Create an account to join the conversation.

More
8 months 3 weeks ago #167088 by Krikor Boghossian
Krikor Boghossian replied the topic: K2 - AJAX Pagination - load more items
Nice one Willburn!
Kudos.

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

---
JoomlaWorks
www.joomlaworks.net/

Please Log in or Create an account to join the conversation.

More
1 month 3 weeks ago #169743 by Alajos Szilagyi
Alajos Szilagyi replied the topic: K2 - AJAX Pagination - load more items
Thank you for this code... you helped me out a lot!!!

Please Log in or Create an account to join the conversation.

Moderators: william white