Pagination not quite working as expected

[Evgene Karachevtsev]

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

[Alex GG]

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

[Yurii Orishchuk]

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({});

Code: Select all

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

}

/code
/pre

Regards.

[Nick7229476]

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

[Maryna Brodina]

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)

[Nick7229476]

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.

[Evgene Karachevtsev]

Hello Nick,

Thank you for the update, glad it works!

[Joe Tenga]

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?

[Yurii Orishchuk]

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.

[Joe Tenga]

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?