2.1 準備數據集

新建模板，在模板中新建 3 個數據集，sql語句如下：

1)ds1：SELECT?*?FROM?訂單?where?貨主地區?is?not?null?and?應付金額?is?not?null

${if(len(area)>0,"?and?貨主地區='"+area+"'","")}?order?by?貨主地區,訂單ID

limit?${if(fr_pagenumber>=1,(fr_pagenumber-1)*pageSize+','+pageSize,pageSize)}

ds1 將會作為報表頁面要呈現的數據，其中設置了數據集參數 area 和 pageSize ，area 為地區，pageSize 為每頁顯示的行數，設置pageSize 的默認值為10 。

fr_pagenumer 是 FR 報表自帶的參數，該參數代表報表當前頁是第幾頁，不需要專門添加為參數 。

2)ds2：select?貨主地區?from?訂單?where?貨主地區?is?not?null?group?by?貨主地區

ds2 將會是參數面板中貨主地區下拉框控件的數據來源。

3)ds3 ：${if(totalCount>0?&&?totalPage>0,'select?'+totalCount+'?as?totalCount?',

'SELECT?count(*)?totalCount?FROM?訂單?where?貨主地區?is?not?null?and?應付金額?is?not?null

'+?if(len(area)>0,"?and?貨主地區='"+area+"'",""))}

ds3 用于獲取每次查詢結果的記錄條數，即每次查詢結果共有多少條記錄。

其中設置了數據集參數 totalPage 和 totalCount，totalPage?代表報表總共有多少頁，totalCount?代表報表總共有多少條記錄。

2.2 添加參數控件

根據設置的數據集參數，在參數面板添加參數控件，參數和控件的綁定使用可以參考文檔：參數簡介?。

1)添加下拉框控件?area 和?pageSize ，area 綁定 ds2 單選貨主地區，pageSize 自定義10-50單選每頁顯示的行數，如下圖所示：

2)添加文本控件，分別為 fr_pagenumer? ?、totalPage??、totalCount ，其中 totalCount 綁定數據列 ds3 的 totalCount列，如下圖所示：

3)添加預定義查詢按鈕，添加按鈕點擊事件，如下圖所示：

JavaScript 代碼如下：var widget=contentPane.parameterEl.getWidgetByName('fr_pagenumber');

widget.setValue('1');//每次點擊查詢時將當前頁重置為1

_g().parameterCommit();

4)向上拉動參數面板邊界線，隱藏不需要顯示的參數，參數面板最終效果如下圖所示：

2.3 設計報表樣式

設計報表樣式，如下圖所示：

其中：

A3 單元格插入公式?seq()生成序號

A4 單元格插入公式統計頁數信息，公式如下：CONCATENATE("第",$fr_pagenumber,"頁，共",roundup(value("ds3","totalCount")/$pageSize),"頁，",$pageSize,"條/頁，共",$totalCount,"條")

公式解釋：步驟作用公式說明

value("ds3","totalCount")獲取 ds3 數據集里的 totalCount 列的值Value(tabledata,col,row)返回 TableData 中列號為 col，行號為 row 的值roundup(value("ds3","totalCount")/$pageSize)用總條數除以總每頁條數向上取整獲得總頁數roundup() 含有小數的值進行向上取整

CONCATENATE(......)將頁數信息拼接起來concatenate() 拼接字符串字符

2.4 自定義翻頁按鈕

點擊菜單模板>模板 Web 屬性>分頁預覽設置，設置為該模板單獨設置，

1)在使用工具欄位置，先清空原有工具欄，然后添加 4 個自定義按鈕，如下圖所示：

四個自定義按鈕名稱分別分首頁、上一頁、下一頁、末頁，如下圖所示：

2)分別為按鈕添加點擊自定義事件，如下圖所示：

JavaScript 代碼如下：

1)首頁按鈕：page_up_down('firstPage',this);

2)上一頁按鈕：page_up_down('prevPage',this);

3)下一頁按鈕：page_up_down('nextPage',this);

4)末頁按鈕：page_up_down('lastPage',this);

2.5?引用?JavaScript

1)下載 page.js 后保存在%FR_HOME%\webapps\webroot目錄下。

點擊下載 JavaScript 文件：? ?page.js

2)點擊菜單模板>報表 Web 屬性>引用 JavaScript ，在磁盤文件中找到剛剛下載的?page.js 文件，引用 JavaScript 的配置，如下圖所示：

注：此 JS 文件引用后只支持當前報表，如果要在所有報表里使用，可在「服務器>服務器配置>引用 JavaScript?」里添加 page.js。

page.js?代碼如下：//翻頁按鈕事件

function page_up_down(mode,obj){

var widget=contentPane.parameterEl.getWidgetByName("fr_pagenumber");

var fr_pagenumber=widget.getValue();

console.log('fr_pagenumber='+fr_pagenumber);

if(mode=='firstPage'){//首頁

if(fr_pagenumber>1){

widget.setValue(1);

}else{

obj.setEnable(false);

return ;

}

}else if(mode=='lastPage'){//末頁

var widget2=contentPane.parameterEl.getWidgetByName('totalPage');

var totalPage=widget2.getValue();

//console.log('totalPage='+totalPage);

if(parseInt(fr_pagenumber)

widget.setValue(totalPage);

}else{

obj.setEnable(false);

return ;

}

}else if(mode=='prevPage'){//上一頁

if(fr_pagenumber>1){

fr_pagenumber=parseInt(fr_pagenumber)-parseInt(1);

widget.setValue(fr_pagenumber);

}else{

obj.setEnable(false);

return ;

}

}else if(mode=='nextPage'){//下一頁

var widget2=contentPane.parameterEl.getWidgetByName('totalPage');

var totalPage=widget2.getValue();

fr_pagenumber=parseInt(fr_pagenumber)+parseInt(1);

if(parseInt(fr_pagenumber)<=parseInt(totalPage)){

widget.setValue(fr_pagenumber);

}else{

obj.setEnable(false);

return ;

}

}

_g().parameterCommit();//報表參數提交

}

function afterload(){

//更新總頁數

var widget=contentPane.parameterEl.getWidgetByName('totalPage');

var widget2=contentPane.parameterEl.getWidgetByName('pageSize');

var widget3=contentPane.parameterEl.getWidgetByName('totalCount');

if(widget){

var totalCount=widget3.getValue();

var pageSize=widget2.getValue();

var totalPage=Math.ceil(totalCount/pageSize);

console.log('totalPage='+totalPage);

var newPage=widget.getValue();

if(newPage<1){

newPage=1;

}

//if(newPage!=totalPage){

widget.setValue(totalPage);

//}

var widget4=contentPane.parameterEl.getWidgetByName('fr_pagenumber');

var pagenumber=widget4.getValue();

if(pagenumber>totalPage && totalPage>0){

widget4.setValue(totalPage);

}

}

}

代碼解釋:

page.js 包含了兩個函數：

page_up_down 函數，功能是點擊翻頁按鈕時觸發 JS 事件，先獲取當前頁，再和總頁數做對比，進行下一頁、上一頁的相應加減功能及跳轉到末頁功能。

afterload 函數，功能是將數據集返回的報表總頁數、總條數更新到參數面板的控件里，然后在查詢時作為參數傳遞到 sql 里獲取報表數據。

2.6 添加效果事件

點擊菜單模板>模板 Web 屬性>分頁預覽設置，添加報表加載結束事件，如下圖所示：

JavaScript代碼如下：afterload();

若想設置鼠標滑動變色的效果，可以再添加一個加載結束事件， JavaScript 代碼如下：contentPane.makeHighlight('#E6E6FA?','mouseover');//鼠標滑動變色

若想設置頁面居中的效果，可以再添加一個加載結束事件， JavaScript 代碼如下：//框架

var wrap = $('.reportPane');

//主體內容

var body = $('.page-block');

//計算偏移

var dif = (wrap.width() - body.width()) / 2;

//設置屬性

body.css({'margin-left': dif});

2.7 效果預覽

保存報表，點擊分頁預覽，報表效果如 1.1 節所示。

注：不支持移動端

總結

以上是生活随笔為你收集整理的html修改每页显示数量,JS实现动态设置每页显示固定行数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。