Update Pagination Behavior for a Table

You can improve the performance and usability for a table by controlling the number of records that appear on a page and the total number of records displayed.

Here are some things to consider before adjusting the total number of records and pagination for your table:

You can either choose to load more records initially with slight delays later in scrolling or have an initial delay when you load records, which will allow for smoother scrolling. The scroll-policy-options.fetch-size property controls the number of records feteched initially. For example, if you set this property high to a high number, it will fetch many records at the start and scrolling through them will be smooth, but the initial fetch might be a bit slower and you will consume more memory on the client.
You might also want to limit the number of total records a user can fetch to control the amount of network traffic and memory consumption on the client. The default for a JET table is set to 500 but you can modify this with the scroll-policy-options.max-count property of the table.

Note:

To further improve the table’s usability, consider adding filtering controls to the table to allow users to define search criteria to display the records they want listed.

To adjust pagination and total records displayed, you can:

Add pagination controls to your table to limit the number of records shown on each page and control the total number of records shown.
Set the table to load all records to fetch all records when the table loads on the page.

Add Pagination Control to Your Table

While users can use the browser’s scroll bar to scroll through the rows displayed in table, in most cases you’ll want to limit the table's height, so that only a certain number of records are shown at a time.

When you set the table’s height, paging is automatically implemented and a fixed number of records is fetched at a time (25 is the default).

Note:

For pagination to work efficiently, your backend server needs to support pagination – Visual Builder's business objects and SaaS services support this out of the box. For other REST services that support pagination, you’ll need to define a transform function as part of the service definition.

To add pagination control to your table:

Define a new CSS class in app.css. Open your application in the Designer, then expand the Resources and css nodes, as shown below. Paste this line into app.css and change the height from 500px to the height that would show the number of rows you want:
```
.tableheight {height : 500px;}
```
Description of the illustration add-pagination-css-tableheight.jpg
Go to the Page Designer tab for the page, select the table on the canvas, then select the All tab in the Properties pane. Enter class in the search box to bring up the class property for the table, then enter tableheight in the class property:

Description of the illustration add-pagination-tableheight-property-pane.jpg

To fine-tune how many total rows are displayed and how many rows are fetched at a time:

With the table selected on the canvas, click All on the Properties pane and type scroll in the search box.
Click the arrow on the far right of the Scroll Policy Options property:

Description of the illustration add-pagination-table-scroll-properties.bmp
Adjust the Scroll Policy Options:
- For the Fetch Size property, enter the optimal fetch size.
- For the Max Count property, enter the total number of records displayed in the table.
Description of the illustration add-pagination-table-scroll-fetch-size.bmp

Note:

To keep the table and data source in sync, it is recommended that you set the #maxSize property for the SDP pagingCriteria to match the scroll-policy-options.max-count table setting.

Load All Records

You can load all of the table data onto the page at one time by setting the scroll policy to Load All.

With the table selected on the canvas, click All on the Properties pane and type scroll in the search box.
From the Scroll Policy drop-down menu, select Load All:

Description of the illustration table-scroll-load-all.png

All table data is fetched and rendered when the table is displayed in the application.

For more details about the scroll properties of the oj-table component, see Oracle Jet - oj.table Element.