I want to add Client side pagination in my react web application so that I can show limited data at a time. in my backend, I am using strepi and DB = postgresql. Can anyone help me with this?

CodePudding user response：

There are 2 types of pagination.

1. Client side - You fetch the full set of data and then divide the data into sets of X (a number you decide on your UI) and then implement the pages for it.
2. Server side - You have a server which handles the pagination logic for you. You fetch the data based on a limit parameter (e.g. you have 100 data entries, and you set a limit parameter of 10). The server will then respond with the data limited to the parameter you set, and also a pagination token. For you to get the next set of data (e.g. 11th to the 20th entry), you pass the pagination token back to your server, you can do this 10 times before your server do not reply you with a pagination token.

CodePudding user response：

There are many types of pagination. You can find more about it here: https://www.citusdata.com/blog/2016/03/30/five-ways-to-paginate/.

The two main ones I have encountered are offset- and cursor-based pagination. In the former, you take several items and "remember" how many items per page you have and rely on that number to take the next set of items. In the latter one, you receive the cursor (id) of the last item from the items list.

You also have to query for the item count so you can render your pagination component accordingly.