A table is used to display a set of structured data in a list. A pagination table is a table that divides information of a table into discrete pages, which enables users to navigate the data of the table page by page. The following two types of tables are supported:
▪ Navigating pages by using page numbers
▪ Navigating pages by using Next and Previous buttons
As shown below, different pages can be selected by clicking page numbers. When a page number is clicked, an AJAX request is sent to the backend to retrieve new page data to be displayed.
A paginated table that contains page numbers for navigation
Navigating pages by using Next and Previous buttons
As shown below, when navigating to different pages of a table by using Next or Previous buttons, page numbers are not displayed so that a user does not know the number of pages that are available. Only the Next or Previous buttons can be used to view next or previous pages. When the Next or Previous buttons are clicked, an AJAX request is sent to the backend to retrieve data for the next or previous page. If the request is processed successfully, the next or previous page is displayed.
A paginated table that contains Previous and Next buttons for navigation
The AbstractPaginationOp abstract class is provided on the server side to handle the pagination process. The AbstractPaginationOp abstract class is a core part and controller for all pagination processes. Developers can extend the AbstractPaginationOp class. In product, it provides a default implementation.
The table pagination architecture consists of the following components:
Table page
Is the browser side table widget. It sends pagination requests the to server side and renders the server side response data in table.
The TechnicalPaginationOp class
Extends the AbstractPaginationOp class. It is used to initialize pagination environments, necessary data and handlers. It also invokes business operations to retrieve raw data, format data, and so on.
The following steps are involved in the handling of a table pagination request:
1 Table page sends a pagination request to the server side via the AJAX channel.
2 beforeExecuteBizOp(): This step is used for customer extension. It is designed to perform logic before calling the business operation; the logic is implemented on the project-level. For example, it retrieves required parameters from the received data and enters the parameters into the processor context.
3 initBizOp(): This is a private method, and it initializes the business operation instance and related resources. For example, it creates the business operation object and chains its context to the parent context, and register an event listener for the business operation.
4 handleBizOpInputMapping(): This step used for customer extension. The developer who creates a new pagination operation can extend this method to add data mapping from the parent/processor context to the business operation context.
After this, the handleBizOpInputMapping() method uses the user-defined input data mapper, which is defined in the XUI tooling, to map data from the process context to the business operation context. An input mapper is a mapper that defines how processor context data is mapped into business operation context data so that the business operation can retrieve information for execution later.
There are four types of input mappers:
initialInputMapping
Is used when the table is shown on first loading.
nextInputMapping
Is used when the total table record number is unknown, and the next page event is fired.
previousInputMapping
Is used when the total table record number is unknown, and the previous page event is fired
directInputMapping
Is used when the total table record number is known, and a new page data request is fired.
5 Invokes the business operation to retrieve the real data. When execution is completed, the business operation fires an event.
6 Based on each event, it uses different output mappers to map the business context data into processor context. Candidate values are “error” and “ok”. “error”: it will use the errorOutputMapping; “ok": it will use the normalOutputMapping.
7 handleBizOpOutputMapping(): This step is used for customer extension. The developer who creates a new pagination operation can extend the handleBizOpOutputMapping() method to add data mapping from the business operation context to parent/processor context.
8 afterExecuteBizOp(): This step is used for customer extension. It is designed to perform logic after business operation execution. The logic is implemented at the project level; for example, entering the necessary data into the pagination operation context
9 updateReplyData(): This is an internal method that organizes the formatted business data as structured data for table page usage.
