1. 概述
1.1 問題描述
在自訂工具欄中，可以顯示總頁數，那麼有什麼方法能實現在工具欄中顯示資料的總條數呢，如下圖所示
1.2 實現思路
透過在某個儲存格中使用 count 函式計算總的資料條數，然後在分頁預覽的載入結束事件中獲取對應儲存格的值並指派給主頁面中的正文框或其他元件中。
注：使用 count 函式的儲存格必須在擴展資料的上方儲存格。
但是這樣存在一個問題，當點選下一頁時，儲存格中顯示的是下一頁資料中對應儲存格的資料而不是總條數。解決方法是透過使用重複標題行，讓 count 函式所在的儲存格固定在一個位置，如放至第一行。
2. 操作步驟
2.1 範本設定
2.1.1 開啟範本
開啟範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\Details_5.cpt
2.1.2 修改範本
在第一行資料前，插入一行資料，然後在 A1 儲存格填寫=count(A3)，如下圖所示：
2.1.3 設定重複標題行
2.1.4 隱藏行列
右擊第一行，隱藏第一行儲存格，如下圖所示：
選擇隱藏即可。
2.1.5 載入結束事件設定
點選選單「範本>範本Web屬性>分頁預覽設定」，新增「載入結束事件」，新增 JavaScript 程式碼，如下圖所示：
JavaScript 程式碼如下：
2.1.6 儲存範本
儲存範本，具體的範本設定可參考：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\Details_7.cpt
2.2 主頁面設定
2.2.1 建立 HTML 檔案
1）建立totalnumber.html，內容如下：
點選下載檔案：totalnumber.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">
<input type = "text" id = "e" style="width:80px">
<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="/webroot/decision/view/report?viewlet=/doc/Primary/DetailReport/Details_7.cpt&__showtoolbar__=false" width =100% height =80%></iframe>
</body>
</html>
2）將totalnumber.html放置到 %FR_HOME%\webapps\webroot\help\page_demo 路徑下。
2.3 預覽效果
啟動工程，在瀏覽器中輸入地址：http://localhost:8075/webroot/help/page_demo/totalnumber.html，效果如下圖所示：
