JS Add a Button to Toolbar for Jumping to a Specific Page

Description: FineReport’s pagination preview offers, by default, buttons such as First, Previous, Next and Last. To jump to a specified page, you have to first input the page number and then press Enter, which is the default solution. However, many users are not used to the Enter operation, but to clicking buttons, so it is necessary to add a button to the toolbar, so that users can jump to specified pages.

Before modification:

After modification:

Under the Pagination Preview settings, create a new button, get the value of the input box on the toolbar page in the User Defined Event and then jump to the page corresponding to the input value.

3.1 Click [Template]>[Web Attributes]>[Pagination Preview], choose Individually set for the report to add a Custom Button to the toolbar, as shown in the figure below:

Change to individually set for the report and double click to add the [Custom Button] icon to the toolbar.

Double click the button to edit it

3.2 Go to Toolbar Settings, set the name of the Custom Button as jump and select an icon for the button, as shown in the figure below:

Click to set the name of the Custom Button as jump and then click to go to the pane for modifying the Custom Button icon.

Select an icon and click OK.

3.3 Click the User Defined Event and input JS codes, as shown in the figure below:

Click to edit the JS event

Input JS codes and click OK

var page=$('.x-toolbar input').val();//Get the value of the input box on the toolbar 
pagecontentPane.gotoPage(parseInt(page));//Jump to a specified page. Here, we have to turn the value above into an integer

3.4 For convenience of use, click on the Up icon (↑) to move the Custom Button up below the Current/Total button (i.e., after the “Current/Total” button in the report), as shown in the figure below:

4.1 Preview effect on a PC

After all these settings, save the template, select [Pagination Preview], input a page number and then click Jump.

Note

Tests indicate that mobile terminals are not supported for the time being

Add a Button to the Toolbar for Jumping to a Specific Page.cpt