Introduction to Client Side and Server Side Pagination in TypeScript

Manage large datasets easily in your web apps’ interface

Photo by Anastasia Zhenina on Unsplash

Pagination is a common Web UI technique that divides large data sets into multiple pages and displays one page at a time. Typically, pagination happens to tables, which is an arrangement of data in rows and columns. However, pagination is not limit to tables; it may happen to other components.

Pagination can be handled on the client-side or server side. In this article, we are going to introduce pagination services, and provide examples of client-side pagination and server-side pagination.

Pagination

Pagination is a UI presentation to show more data with limited screen space. The following is a paginated table that is displayed by the Ant table. This table has two pages, and the example shows the first page. Internally, it uses HTML table component, with a pagination footer to show page information.

Image by author

A table can be styled not looking like a table, or it may be constructed without a table component. The following UI is from Amazon search result, and it is composed by div components. It shows the first page of total 13 pages.

Screenshot from Amazon by author

For a paginated table/component, it requires the following information:

• Page size
• Page index
• Total count

Here is a UI that displays the pagination information.

Assume that there are 1885 rows and the page size is 20. The ceiling of 1885 / 20 is 95. Therefore, it ends up with 95 pages, where each page has 20 rows, except the last page that has 5 rows. The current page number is 3, and it shows rows, 41–60, out of total of 1885 rows.

Sometimes, the total count is not available, but you still have the operations to go previous, next or any specific page.