1. 概述
1.1 問題描述
使用者將網頁中的一部分嵌入了一張報表範本，有時希望能夠自己定義翻頁按鈕，不使用報表已有的按鈕，如下圖所示：
1.2 實現思路
由 自定义按钮 章節可知，如上圖中的首頁、上一頁、下一頁、末頁按鈕，直接呼叫 FR 內建方法即可
首頁按鈕呼叫方法：gotoFirstPage()
上一頁按鈕呼叫方法：gotoPreviousPage()
下一頁按鈕呼叫方法：gotoNextPage()
末頁按鈕按鈕呼叫方法：gotoLastPage()
獲取當前所在頁與總頁數對應方法「contentPane.currentPageIndex」及 「contentPane.reportTotalPage」
2. 操作步驟
2.1 建立 HTML 檔案
1）建立goPage.html，內容如下：
點選下載檔案：goPage.zip
<html>
<head>
<title>自訂翻頁按鈕</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function afterload() { //iframe 載入後觸發
var contentPane = document.getElementById("reportFrame").contentWindow._g(); //獲取報表 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 正文賦頁碼資訊
});
}
function gotopage() {
var contentpane= document.getElementById('reportFrame').contentWindow._g();
var page = document.getElementById("index").value;
if(page >= contentpane.reportTotalPage) {
contentpane.gotoLastPage();
}
contentpane.gotoPage(parseInt(page));
}
</script>
</head>
<body>
<div id="toolbar">
<button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoFirstPage()">首頁</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoPreviousPage()">上一頁</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoNextPage()">下一頁</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoLastPage()">末頁</button>
<input id="page" type="text" readonly="true" size="12" style="border:none">
到<input id ="index" type ="text" size="3"/>頁 <a onclick="gotopage()" href="javascript:void(0)">跳轉</a>
</div>
<iframe id="reportFrame" onload="afterload()" src="../../decision/view/report?viewlet=/doc/Primary/DetailReport/Details.cpt&__showtoolbar__=false" width =100% height =80%></iframe>
</body>
</html>
2）將goPage.html放置到 %FR_HOME%\webapps\webroot\help\page_demo 路徑下。
2.2 效果預覽
啟動工程，在瀏覽器輸入：http://localhost:8075/webroot/help/page_demo/goPage.html ，效果如下圖所示：
