Forum | Appery.io

Hello Alex,

You should invoke this code on "next" button click:
code $('[dsrefid="mobilelistitem_3"]').not('[_tmpl="true"]').attr("dsrefid", ""); /code
where mobilelistitem_3 is the name of your list item component

Righ now I have this code on "load more" button click:

code
var skip = parseInt(localStorage.getItem('skip'));
var limit = parseInt(localStorage.getItem('limit'));
var total = parseInt(localStorage.getItem('total'));
if (limit + skip < total){
localStorage.setItem('skip', limit+skip);
restservice1.execute({});

if (limit + skip == total - limit) {
Appery('nextButton').hide();
}
}
code

Where should I paste your code?

Regards/code/code

Hi Alex.

You have to add this code before code you have now.

So your code should be:

pre
code

&#47;&#47;Note: you should to replace "mobilelistitem_3" with your list item name&#46;
$('[dsrefid="mobilelistitem_3"]')&#46;not('[_tmpl="true"]')&#46;attr("dsrefid", "");

var skip = parseInt(localStorage&#46;getItem('skip'));
var limit = parseInt(localStorage&#46;getItem('limit'));
var total = parseInt(localStorage&#46;getItem('total'));
if (limit + skip < total) {
localStorage&#46;setItem('skip', limit + skip);
restservice1&#46;execute({});

 if (limit + skip == total - limit) { 
     Appery('nextButton').hide(); 
 }; 

}

/code
/pre

Regards.

I can't get pagination to work. Content is shown but the "nextButton" does not work.
Is this tutorial:
http://devcenter.appery.io/tutorials/...
Missing any other steps?
Surely parameter "total" is missing from
Project Model & Storage Storage
Along with "limit" & "skip"? Tried this, but still no luck.
Thanks

Hello!

Unfortunately this tutorial is not updated yet, thus there are no parameters Project Model & Storage Storage. You would need to add them manually. Please check if you specified everything correctly, initial data (total parameter)

Update....all working OK now.
If you only have x10 news items & the total set as x 50 e.g. (localStorage.setItem('total', 50);
The buttons won't "next" button won't hide correctly.
Thanks.

Hello Nick,

Thank you for the update, glad it works!

AlexGG wrote "For example, on page load I want to show just 10 elements, if user clicks "load more" the list should have 20 elements... "

As I understand that, Alex was not asking to only show the next 10 items (items 11-20) , but the previous 10 items plus the next 10 items (all items 1-20). This would enable the list to grow with each "load more", incurring only a 10 item database hit each time.

Yurii advised the following code:
=========
//Note: you should to replace "mobilelistitem_3" with your list item name.
$('[dsrefid="mobilelistitem_3"]').not('[_tmpl="true"]').attr("dsrefid", "");
var skip = parseInt(localStorage.getItem('skip'));
var limit = parseInt(localStorage.getItem('limit'));
var total = parseInt(localStorage.getItem('total'));
if (limit + skip < total) {
localStorage.setItem('skip', limit + skip);
restservice1.execute({});
if (limit + skip == total - limit) {
Appery('nextButton').hide();
};
}
=========
Presumably this solution was intended to retain the results of the previous query (items 1-10) and add to it the results of the next query (items 11-20).

When I did this (and yes I replaced the List Item with mine), the list only showed the next 10 items (items 11-20). That is the same behavior as it would have had without the addition of :
$('[dsrefid="mobilelistitem_3"]').not('[_tmpl="true"]').attr("dsrefid", "");

(which by the way, what does this do exactly?)

Did I misunderstand the intent of Yurii's code? If not, what might I be doing wrong?

Hi Joe,

If you want to load current items + next items - you can use following code:

pre

var itemsPerPage = 20;
&#47;&#47;Note: you should to replace "mobilelistitem_3" with your list item name&#46;
$('[dsrefid="mobilelistitem_3"]')&#46;not('[_tmpl="true"]')&#46;attr("dsrefid", "");
var skip = parseInt(localStorage&#46;getItem('skip'));
var limit = parseInt(localStorage&#46;getItem('limit'));
var total = parseInt(localStorage&#46;getItem('total'));
if (limit + skip < total) {
&#47;&#47;localStorage&#46;setItem('skip', limit + skip);
localStorage&#46;setItem('limit', limit + itemsPerPage);
restservice1&#46;execute({});
if (limit + skip == total - limit) {
Appery('nextButton')&#46;hide();
};
}

/pre

Also you can try following plan:

1. Leave code as suggested.

2. Get all items from list(except templateitem) and then on success event handler - append them again at the beginning of the list.

   Regards.

Yurii,
Thank you. It seemed to do the trick. Can you please clarify for me something though?

Is this a lazy load approach, or does the amount of data being queried from the database keep growing by "itemsPerPage" with each button press?