Skip to main content

Setup Server-side Pagination on List

This page shows you how to set up server-side pagination on the List widget, which allows you to manage and display large datasets within your application. It involves fetching and displaying only a portion of data from the server at a time, enhancing performance.

Configure query​

Most databases and APIs support server-side pagination, although the methods of implementation can vary.

Create a query to fetch data from the database or API using pageSize, and pageNo reference properties to implement pagination.

Example:

  • For PostgreSQL, you can configure the query as follows:
SELECT * FROM users
ORDER BY id
LIMIT {{ List1.pageSize }}
OFFSET {{ (List1.pageNo - 1) * List1.pageSize }}
  • For the REST API, the page number can be passed as a query parameter to retrieve the corresponding subset of data, like:
https://mock-api.appsmith.com/users?page={{List1.pageNo}}

You can refer to the datasource reference for specific instructions on setting up pagination for your selected datasource.

Configure List widget​

Follow these steps to configure the List widget to display fetched data, and implement server-side pagination:

  1. Connect the query data to the Items property of the List widget.

Example:

{{fetchData.data}}

  1. Enable the Server-side pagination property.

  2. Set the List widget's onPageChange event to run the pagination query.

With this setup, users can paginate through data, ensuring an efficient browsing experience.

Configure total records​

To provide the user with information about the number of records in the List, you can configure the Total records property. The record count is displayed as part of the page number at the bottom of the list.

  1. Create a query to fetch the total record count.

PostgreSQL Example:

SELECT COUNT(*) FROM users;

This SQL query counts and returns the total number of records (rows) in the users table.

  1. To display the count, add the following code to the Total records property:
{{fetch_users_count.data[0].count}}