There are cases when server-side pagination is needed to display data in a widget that doesn't have built-in Server Side Pagination functionality. In such cases, you can create your own pagination. Let's consider an example with the Carousel widget, where we need to display 3 images per page. The data is fetched from a PostreSQL database.
Step 1: In the database query, specify the "limit" and "offset" parameters.
"Limit" determines how many objects we return. In this case, it's 3.
"Offset" determines how many objects we need to skip.
For example, if it's data for the first page, we show 3 objects and skip 0. For the second page, we show 3 objects and skip the first 3.
To calculate the number of data to skip, we need to pass the page number we want to retrieve the data for. The page number is passed as "msg.payload.page" from the UI Editor.
Example:
Step 3: Create three functions in the JSObject.
storePageValue: This function is triggered on page load and stores the value of the page as 1.
increment: This function increases the value of the page by 1 and calls the getImages API.
decrement: This function decreases the value of the page by 1 and calls the getImages API.
Step 4: Use the following widgets:
For further actions, you may consider blocking this person and/or reporting abuse
English:
Custom Pagination with PostreSQL Database
There are cases when server-side pagination is needed to display data in a widget that doesn't have built-in Server Side Pagination functionality. In such cases, you can create your own pagination. Let's consider an example with the Carousel widget, where we need to display 3 images per page. The data is fetched from a PostreSQL database.
Step 1: In the database query, specify the "limit" and "offset" parameters.
"Limit" determines how many objects we return. In this case, it's 3.
"Offset" determines how many objects we need to skip.
For example, if it's data for the first page, we show 3 objects and skip 0. For the second page, we show 3 objects and skip the first 3.
To calculate the number of data to skip, we need to pass the page number we want to retrieve the data for. The page number is passed as "msg.payload.page" from the UI Editor.
Example:
Step 3: Create three functions in the JSObject.
storePageValue: This function is triggered on page load and stores the value of the page as 1.
increment: This function increases the value of the page by 1 and calls the getImages API.
decrement: This function decreases the value of the page by 1 and calls the getImages API.
Step 4: Use the following widgets: