Skip to main content

Implementing Pagination Caching in Data Tables

Scenario Description​

On the data table list page (with pagination display), when a user clicks on a data item to enter the details page, the system should automatically navigate back to the original page position upon return, avoiding redirection to the homepage to enhance operational continuity.

Implementation Logic​

  1. Define two global variables

    • pageSize: Number, indicating the number of items per page, default value: 10
    • PageNo: Number, indicating the current page number, default value: 1

  2. Bind the data table's rows per page and page number to the aforementioned variables

  3. In the data table query success event, reassign values to the two variables defined in Step 1. 

    ({ event }) => {
      $w.app.dataset.state.pageNo = $w.table2.pageNo;
      $w.app.dataset.state.pageSize = $w.table2.pageSize;
    };

  4. Cache testing: Set the table page size to 20 and switch to the second page

  5. Navigate to the details page

  6. After returning from the details page, the page number and page size remain unchanged