Kuika's Pagination element improves user experience by dividing large data sets into pages. This element facilitates page transitions in large data structures such as tables, lists, or reports, providing a high-performance and organized view.

Supported in web and mobile applications.

Areas of Use

• Tables → Split long data lists (e.g., invoices, users)
• Reporting → Divide multi-line reports into sections
• Gallery Views → Split images into pages
• List Views → Manage product, customer, or record lists

Use Case – Invoice List (Recent Invoice)

In a financial management or invoicing application, users view their invoices in a list on the “Recent Invoice” tab.

• 6 invoices are displayed on each page.
• Users navigate to other invoices by clicking on the page numbers.
• They navigate forward and backward using the ‘Next’ or “Previous” buttons.
• Quick Jumper allows them to go directly to a specific page number.
• The total number of records is automatically calculated based on the number of items displayed per page.

Connecting the Data Source

1. Go to the Datasources module.

2. Click the Tables > + icon and create a table named InvoicesPaginated.
3. Table structure:
4. Actions > Create a new action from the SQL Actions tab: GetInvoicesPaginated

SELECT * FROM InvoicesORDER BY Date DESCOFFSET @{(Pagination.Current - 1) * Pagination.PageSize} ROWSFETCH NEXT @{Pagination.PageSize} ROWS ONLY;SELECT COUNT(*) AS Total FROM Invoices;

5. Link the Pagination element to this action:

• Page Size → Pagination.PageSize
• Total → Total number of records in the action result

UI Design Module Operations

1. Create a table (e.g., “Recent Invoice”) in the UI Design module.
2. Drag and drop the Pagination element below it.
3. Configure the following settings in the Properties panel:
   
   • Total → Action resultPage Size → 6
   • Current → 1
   • Show Quick Jumper → True
   • Show Size Changer → True
   • Size Changer Options → Actions is selected.
   • Selected Border Color → Blue (#4B7CF3)
   • Show First Page Button / Last Page Button → True

Using Properties in a Scenario Context

• Total
  
  • Description: Determines the total number of records.
  • Example: 120 records → 20 pages (PageSize=6).
• Page Size
  
  • Description: Determines how many records will be displayed on each page.
  • Example: 6 → 6 invoices are displayed.
• Current
  
  • Description: The page that is open at the start.
  • Example: 1 → First page.
• Show Quick Jumper
  
  • Description: Allows the user to jump directly by entering the page number.
• Show Size Changer
  
  • Description: Allows the user to change the number of records per page.
• Show First/Last Page Button
  
  • Description: Provides quick access to the first and last pages.

When the Scenario Step is Complete

• The user sees the invoices paginated.
• When the page number is clicked, only the records for that page are loaded.
• SQL Action is triggered dynamically, maintaining performance.
• Quick Jumper and Size Changer enhance the user experience.

Limitations

• If the Total field is not connected correctly, the number of pages will be calculated incorrectly.
• Performance may decrease with large data sets when server-side pagination is not used.

Tips and Best Practices

Common mistake: Fetching all data at once → Reduces performance. Call separate data for each page.

• Quick Jumper and Size Changer are recommended for large tables.
• Placing the pagination element at the bottom of the table is the most appropriate UX approach.
• Create efficient queries by using OFFSET + FETCH queries on the backend.