Clicking the Button to Switch Sheet by JS-FineReport Help Document

Last update：March 25, 2025

Overview

Version

Report Server Version	Functional Change
11.0	-

Problem

When there are multiple sheets in a report, you can jump to a specified Sheet page through clicking the button on the parameter panel, as shown in the following figure.

Implementation Method

This effect is achieved by adding JS events to the buttons on the parameter panel and positioning the corresponding Sheet in the events.

Example

Template Preparation

1. Create a template and add four Button Widget items on the parameter panel. The widget names are First Page, Previous Page, Next Page, and Last Page, as shown in the following figure.

image 59.png

2. Click the parameter panel of the template and deselect Display Nothing Before Query, as shown in the following figure.

image 60.png

3. Add multiple Sheet pages and add red identification statements in each Sheet page, as shown in the following figure.

image 61.png

Event Adding

1. Select Button Widget on the first page and add a Click event to it. Then you can click the button to jump to Sheet1 page, as shown in the following figure.

image 62.png

The JavaScript codes are as follows:

//Jump to the first page (because the subscript starts from 0). fr-sheetbutton-container specifies the sheet collection.
$(".fr-sheetbutton-container").eq(0).trigger("click");

2. Use the same method to add the Click events to the widget buttons of the previous page, next page, and last page. The event content is as follows:

JavaScript codes of Previous Page are as follows:

//Get the collection length. fr-sheetbutton-container specifies the sheet collection. 
var len = $(".fr-sheetbutton-container").length;
//Get the subscript of the currently-selected sheet.
var index = $(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"));
//If the current subscript is 0, the page is the first page.
if(index > 0) {
//Jump from the non-first-page page to the previous page.
    $(".fr-sheetbutton-container").eq(index - 1).trigger("click");
}else{
//Jump from the current first page to the last page. (Because the subscript starts from 0, the length needs to be reduced by 1.) 
$(".fr-sheetbutton-container").eq(len - 1).trigger("click");
}

JavaScript codes of Next Page are as follows:

//Get the collection length. fr-sheetbutton-container specifies the sheet collection.
var len = $(".fr-sheetbutton-container").length;
// Get the subscript of the currently-selected sheet(because the subscript starts from 0).
var index = $(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"));
if(index < len) {
//If the index of the current subscript is 1 less than the value of len, the page is the last page. 
    if(index == (len - 1)) {
       //Jump from the current last page to the first page.
        $(".fr-sheetbutton-container").eq(0).trigger("click");
    } else {
       //Jump from the non-last-page page to the next page. 
        $(".fr-sheetbutton-container").eq(index + 1).trigger("click");
    }
}

Show Code

JavaScript codes of Last Page are as follows:

//Get the collection length. fr-sheetbutton-container specifies the sheet collection.
var len = $(".fr-sheetbutton-container").length;
//Jump to the last page. (Because the subscript starts from 0, the length needs to be reduced by 1.)
$(".fr-sheetbutton-container").eq(len-1).trigger("click");