在实际项目中，有可能会用到每页显示固定的行数和鼠标滑动变色，如果使用 JavaScript 来实现每页显示固定的行数，那么这时候就需要在工具栏自定义按钮来实现翻页了，具体该如何实现呢？

2.1 模板数据集配置

在新模板中新建 3 个数据集。

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用于展示正文报表数据。pageSize 设置一个默认值，如 10。

ds2：select 货主地区 from 订单 where 货主地区 is not null group by 货主地区
ds2 是参数面板货主地区的数据字典来源。

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 用于获取每次查询结果的记录条数，即每次查询结果共有多少条记录，并可以计算共有多少页报表。

2.2 模板参数配置

添加 4 个参数：area：货主地区；totalPage：总页数；pageSize：每页显示数量；totalCount：总记录条数，如下图所示：

2.3 参数面板配置

添加三个文本控件，分别命名为 fr_pagenumer   、totalPage  、totalCount，totalCount 值绑定数据列 ds3的 totalCount，参数界面如下图：
当前页：fr_pagenumer是报表自带的参数，不必再在模板参数里添加 ，该参数代表报表当前页是第几页。
总页数：totalPage是自定义的参数，代表报表总共有多少页。
总条数totalCount是自定义的参数，代表报表总共有多少条记录。

在地区后添加一个下拉框单选控件，控件命名为area，数据字典配置为：

再每页显示行数添加一个下拉框单选控件，控件命名为 pageSize，数据字典配置为：

添加一个预定义查询按钮，添加按钮点击事件，如下图所示：

JavaScript 代码如下：
var widget=contentPane.parameterEl.getWidgetByName('fr_pagenumber');
widget.setValue('1');//每次点击查询时将当前页重置为1
_g().parameterCommit();

2.4 报表主体

模板设计如下图所示：

A 列需要隐藏。A3 单元格插入公式：ds1.select(#0)，表示 ds1 数据集里的所有行号，行号从 1 开始。
A4 插入公式：CONCATENATE("第",$fr_pagenumber,"页，共",roundup(value("ds3","totalCount")/$pageSize),"页，",$pageSize,"条/页，共",$totalCount,"条")
公式含义为
concatenate 函数是将一系列的字符串值串联成新的字符串；
roundup 函数是将含有小数的值进行向上取整；
value("ds3","totalCount")是获取 ds3 数据集里的 totalCount 列的值，因为 ds3 里只有一行一列，所以这样写就可以了，具体可查看 value 函数用法。

2.5 报表分页预览配置

点击菜单模板>模板 Web 属性>分页预览设置，设置为该模板单独设置，自定义翻页按钮只能在该模板使用，如下图所示：

（1）工具栏配置：先清空原有的工具栏，然后添加四个自定义按钮
首页按钮：编辑按钮图标，控件别名为首页，控件图表选择  ，如下图所示：

点击自定义事件，添加js代码：

page_up_down('firstPage',this);

上一页按钮：编辑按钮图标，控件别名为上一页，控件图表选择  ，自定义事件中添加 JavaScript 代码：

page_up_down('prevPage',this);

下一页按钮：编辑按钮图标，控件别名为下一页，控件图表选择  ，自定义事件中添加 JavaScript 代码：

page_up_down('nextPage',this);

末页按钮：编辑按钮图标，控件别名为末页，控件图表选择  ，自定义事件中添加 JavaScript 代码：

page_up_down('lastPage',this);

（2）JS引用设置

在%FR_HOME%\webapps\webroot目录下新建文件夹js，将 page.js 复制到 JS 文件夹里，

page.js

并点击菜单模板>报表 Web 属性>引用 JavaScript中进行引用 JavaScript 的配置，如下图所示：

注：如果 JS 要在所有报表里引用，可在服务器>服务器配置>引用 JavaScript 里添加 page.js。

JavaScript 文件解释：
page.js 包含了两个函数：
page_up_down 函数，功能是点击翻页按钮时触发 JS 事件，先获取当前页，再和总页数做对比，进行下一页、上一页的相应加减功能及跳转到末页功能。
afterload 函数，功能是将数据集返回的报表总页数、总条数更新到参数面板的控件里，然后在查询时作为参数传递到 SQL 里获取报表数据。

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)<parseInt(totalPage)){
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);
}
}
}

（3）报表加载结束事件
点击菜单模板>模板 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.6 效果参考

PC端效果如预期

不支持移动端

JS实现动态设置每页显示固定行数.cpt