[New Plugin] Simple Paging / Pagination

[wj_Kim]

I’m excited to introduce new pagination plugin!
You can simply set the data source of the repeating group using the pagination element.
No need to worry about total page number or item count!

Demo page: https://plugin-demo-wj.bubbleapps.io/version-test/pagination?debug_mode=true

Editor page: https://bubble.io/page?type=page&name=pagination&id=plugin-demo-wj&test_plugin=1605227350349x871359723892899800_current&tab=tabs-1

Instruction: https://plugin-demo-wj.bubbleapps.io/version-test/pagination_doc?debug_mode=true

Plugin Page: https://bubble.io/plugin/simple-paging--pagination-1605227350349x871359723892899800

[Christophe_HK]

Sounds great. Does it help in case of a RG loading sloooowly ?

[wj_Kim]

If you are loading >100 items at a time, this plugin should be helpful.
You can paginate it and load 10 items at a time which should improve user experience.

However, it does not improve RG rendering speed.
(Rendering 100 items with RG is the same as rendering 100 items with Pagination element)

Also, you may experience pagination’s loading is a bit slow for the first time, so please give 1 or 2 days. Bubble should be able to optimize the DB index or query to improve loading speed.

[Christophe_HK]

I gave a try to this plugin, and I have to say it’s awesome. Nevertheless, I had to unsubscribe because I can’t build my search constraints. I do need to search for a field which is a reference to a thing. And I don’t know how a search constraint value can be set for such a key. I even don’t know if it’s possible…

[wj_Kim]

Thank you for a feedback!
If you need to search a thing, you can pass the thing’s unique id.

Below is an example of searching items that is created by current user.

Also here is full reference of search constraints:

Bubble Reference

I’ll also update the documentation!

[Christophe_HK]

Wow cool! Many thanks @wj_Kim, I’m going to give a try today!

[Christophe_HK]

Hey @wj_Kim

I was closed to deploy this plugin in Production, BUT there’s an huge impact to do so !

Indeed, if we use the pagination plugin to let the user search for the products of shops, shops being things, so if the user search for Shop A (shop A’s unique ID part of the search constraint of the plugin), then search for Shop B products, the pagination’s items are not reset so the user get results from Shop A displayed when searching for Shop B products ! After few seconds these Shop A’s products disappeared, but I can’t allow this…

Any way to force reset the pagination plugin, or at least to reset the pagination’s items ?

Many thanks in advance !

[Christophe_HK]

Yes, definitively the results need to be flushed, or we do need a way to flush the data from the Data api call…

Else, in the context where a same page, and so à same pagination element, is used to browse data with pagination from différents things (example : different vendors in the case of a marketplace app), the browsed data will be correct for the first vendor catalog, but then the second vendor catalog will contain data from the first vendor catalog, and that’s not good…

Am I correct with the symptoms description?

[wj_Kim]

Thank you for the update!

I’ve done some test cases, and it works properly on my end.
Expected behavior is that whenever value of the search constraints changes, it automatically reload the new items with new search constraints.

If the problem happens in the live version, please make sure you removed /version-test from the obj api url.
Also, I added new workflow action ‘clear pagination’ which manually resets items and other values. If you update the plugin, you will see this action. Please check if this action can help to solve the problem.

If non solution works, you can give me access to your app so that I can look into the problem more detail!

[Christophe_HK]

Many thanks for your feedback and update.

Unfortunately, the reset action does not help. I don’t know if the problem comes from the plugin or from Bubble’s Data API, but it makes the plugin not usable.

More about the context :

• My app is a marketplace, where users can browse shops’ products catalog and buy products.
• “shop” is a data type and contains categories (category datatype). Categories contain products (product datatype, with a data field to reference its Category).
• The pagination element is used in the “catalog” page of my app (data source : a shop).
• In the catalog, the “categories” tree is displayed. When the user select a category, he can see its contents. There’s a “back” button to go back to the previous level (root of the products catalog, or previous category). I’ve attached the “reset a pagination” action to this back button.

What happen :

• me, as a user, visit the Shop#1 page, and browse the catalog.
• I select the products category A, I see the products, ok.
• Then I click the back button, go back to the root of the products catalog,
• Then I select the products category B : the items from the products category A are displayed during a few milliseconds (but it’s okay, probably due to the fact that we can’t reset a RG) then I see the products from the category B.
• Now, I “click the back button and come back to the category B” 4 or 5 times : all products from my database are displayed, aka products from all shops / all categories.

I’m really not sure this issue come from the plugin. it’s as if the Data API’s search constraints are not strictly respected by Bubble…

They are the following , to display the products from a products category :

I’ve added the search constraint with Create date vs Current date/time to force a data refresh (not sure if this is a good practice or not, but I had to ensure the Data API call is done each time I browse a products category).

[wj_Kim]

Here is another thing you could try:

Using chrome browser, click right to inspect the page, and go to Network tab

Click on XHR.
Whenever it makes the request to the data api endpoint, you will see the request headers and response.
While inspecting the xhr request, try to observe the constraints and responses are correct.

[thomas.gounot]

Hi @wj_Kim, thanks for this plugin ! It’s really clean.

Is there any possibility to change the front (color, font, etc) ?

Thanks,
Thomas

[wj_Kim]

You can change the color of the selected button, but no function to change the color, font and size of the number inside of the button

[thomas.gounot]

Thanks for your answer !

Is there a possibility to sort by 2 fields ? In my case, here is how the data of my RG is sorted :

But I see only one sorted by field on the Pagination Element. However Bubble explains how to do it :

Thanks,
Thomas

[thomas.gounot]

Hi @wj_Kim, not sure if you had time to check my previous post

Thanks !

[wj_Kim]

Hi Thomas,

Sorry for the late reply.
Unfortunately, We don’t support additional sorting function at this moment.
I will try to add the function in the next update soon.

Thank you!