在线报表FineReport中如何设置自定义翻页按钮

在线报表FineReport7.1.1

大小：148.2M 适用平台：windows/linux

自定义翻页按钮首页、上一页、下一页、末页按钮，直接调用FR内置方法即可，如下首页按钮：首页其它上一页、下一页、末页按钮分别对应于方法gotoPreviousPage()、gotoNextPage()、gotoLastPage()。

页码显示如上图显示当前报表所在页与报表总页数，获得报表contentPane后可以通过contentPane.currentPageIndex及contentPane.reportTotalPage来获取当前所在页与总页数。由于页码需要在报表加载完后才能够获得，且翻页后当前页码也要随之变化，因此我们在contentPane的加载结束后监听afterload事件中将页码信息赋给文本框。function afterload() {     //iframe加载后触发      var contentPane = document.getElementById('reportFrame').contentWindow.contentPane;  //获取报表contentPane         var cPageIndex = contentPane.currentPageIndex;   //当前所在页      var pv = '第' + cPageIndex + '页/共' + contentPane.reportTotalPage + '页';   //报表首次加载结束后显示的页码信息  document.getElementById('page').value = pv;     //将页码信息赋给page文本      contentPane.on('afterload', function() {      //报表加载结束监听事件        cPageIndex = contentPane.currentPageIndex;      //每次加载完后重新获取当前页码        pv = '第' + cPageIndex + '页/共' + contentPane.reportTotalPage + '页';     //重新生成页码信息         document.getElementById('page').value = pv;      //重新给page文本赋页码信息         });          }

跳转到指定页如上图实现输入某个数字后，点击后面的“跳转”就跳到文本框中写的那页。给“跳转”加上点击事件gotopage，在js中获取文本框中输入的页码，通过contentpane.gotoPage(parseInt(num)) 跳转到指定页。注：gotoPage()中的参数必须是数值型的，而文本框中输入的为字符串，因此需要使用parseInt()将其转为数值。function gotopage() {         var contentpane= document.getElementById('reportFrame').contentWindow.contentPane;         var page = document.getElementById('index').value;         if(page >= contentpane.reportTotalPage) {           contentpane.gotoLastPage();         }          contentpane.gotoPage(parseInt(page));       }

示例完整代码                                  

效果查看