mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-23 06:27:57 +00:00
b49f325793
* updated the formatting of serverside pagination section from the docs * updated the introduction section * restored docosaurus.config.js file and versions.json file * updated the introductory para
92 lines
3.7 KiB
Markdown
92 lines
3.7 KiB
Markdown
---
|
|
id: use-server-side-pagination
|
|
title: Using Server Side Pagination in Tables
|
|
---
|
|
|
|
<div style={{paddingBottom:'24px'}}>
|
|
|
|
In this guide, we will implement server-side pagination for large datasets in a table component to enhance application performance. This guide is applicable for databases like MySQL, PostgreSQL, MSSQL, MongoDB, etc., supporting `limit` and `offset` for chunked data retrieval.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
### Loading Data from PostgreSQL in Chunks
|
|
|
|
To fetch data in chunks from a PostgreSQL table `users`, use `limit` and `offset` in the SQL query:
|
|
|
|
```sql title="PostgreSQL query"
|
|
SELECT *
|
|
FROM users
|
|
ORDER BY id
|
|
LIMIT 100 OFFSET {{(components.table1.pageIndex-1)*100}};
|
|
```
|
|
|
|
The query will fetch 100 rows at a time from the PostgreSQL users table, and the number of rows returned is determined by the current value of `pageIndex`(exposed variable) in the Table component.
|
|
|
|
The following is the breakdown of the above PostgreSQL query:
|
|
|
|
- `ORDER BY id`: Orders the result set by the id column.
|
|
|
|
- `LIMIT 100`: Limits rows returned to 100 per query.
|
|
|
|
- `OFFSET {{(components.table1.pageIndex-1)*100}}`: Determines the starting row number based on the current page index for pagination.
|
|
|
|
|
|
To obtain the count of records in the users table, execute the following query:
|
|
|
|
```sql
|
|
SELECT COUNT(*)
|
|
FROM users;
|
|
```
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
### Edit the Table Component
|
|
|
|
**Follow the steps below to edit the properties of the Table component:**
|
|
|
|
- Drag the table component to the canvas from the components library and set the value of the **Data** property to `{{queries.<postgresquery>.data}}` to populate the table with the relevant data.
|
|
|
|
- Enable the **Server-side pagination** option.
|
|
- Click on the `Fx` next to **Enable previous page button** and set the value as below. This condition disables the previous page button when the current page is page `1`.
|
|
|
|
```js
|
|
{{components.table1.pageIndex >=2 ? true : false}}
|
|
```
|
|
|
|
- Click on the `Fx` next to **Enable next page button** and set it's value as below. This condition disables the next page button when the current page is the last page.
|
|
```js
|
|
{{components.table1.pageIndex < queries.<countquery>.data[0].count/100 ? true : false}}
|
|
```
|
|
|
|
- Set the value of the **Total records server side** property as below. This will set the total number of records in the Table component.
|
|
```js
|
|
{{queries.<countquery>.data[0].count}}
|
|
```
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ width:'100%', border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/server-side/pagination-v2.png" alt="Table data" />
|
|
</div>
|
|
|
|
|
|
- To add the loading indicator on the table component while executing the query, set the `Loading state` property as:
|
|
|
|
```js
|
|
{{queries.<postgresquery>.isLoading}}
|
|
```
|
|
- Select the **Page changed** event and choose the **Run Query** action, after clicking the `New event handler`. Then, select the **Query** from the dropdown that fetches data from the PostgreSQL table.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ width: '100%', border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/server-side/event-v2.png" alt="Table data" />
|
|
</div>
|
|
|
|
Now, whenever the page is changed, the query will be executed, and the data will be fetched from the PostgreSQL table in chunks.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/server-side/change-v2.gif" alt="Table data" />
|
|
</div>
|
|
|
|
</div>
|