详细分页步骤
这个帖子是因为目前工作中需要做真分页功能,然后人员呢技术参差不齐,导致工期经常延期所以整理一个分页步骤,按照步骤进行,基本上分页功能可以控制到40分钟左右(包含导出页面制作,熟练之后可以控制在20分钟)
static/image/hrline/1.gif
第一步:
新增一个模板参数page 默认值给1
第二步:
主数据集后加order BY target_day DESC LIMIT ${P},20
其中target_day随页面进行改动,然后新增一个参数${P},默认值给公式20*($page-1)。这里是按照一页20条记录进行设置的
第三步:
新增一个数据集,根据查询条件查询所有数据,数据集命名为ds1,这个是为了到时候获取到所有的数据行数,然后除20得到总页数
第四步:
点击模板web属性-->分页预览设置,改为为该模板单独设置,然后新增6个自定义按钮
第一个:首页
第二个:上一页
第三个:当前页码
第四个:下一页
第五个:末页
第六个:导出excel
第一个按钮:
主要参数是
page=$page-1
然后下面JS中写
if(page==0)
this.setEnable(false);
else
{
var url = "${servletURL}?reportlet=SPORTS%2FGold%2FLDN_Game_20190104_V1.cpt";
var config =
{
page:"1",
sdate:sdate,
edate:edate
};
FR.doHyperlinkByPost(url,config,'_self');
}
其中sdate和edate自己页面另外的参数,可以随页面进行相应的修改
第二个按钮
主要参数是
page=$page-1
然后下面JS中写
if(page==0)
this.setEnable(false);
else
{
var url = "${servletURL}?reportlet=SPORTS%2FDiamonds%2FLDN_Consume_20190104_v1.cpt";
var config =
{
page:page,
sdate:sdate,
edate:edate
};
FR.doHyperlinkByPost(url,config,'_self');
}其中sdate和edate自己页面另外的参数,可以随页面进行相应的修改,和第一个按钮的区别就是page参数,第一个给传参为1,第二个给传参为page
第三个按钮可以不用管
第四个按钮
主要参数是
page=$page+1
tatol=ROUNDUP(ROWCOUNT("ds1")/20)
然后下面JS中写
if(parseInt(page) > parseInt(total))
{
this.setEnable(false);
}
else
{
var url = "${servletURL}?reportlet=SPORTS%2FDiamonds%2FLDN_Consume_20190104_v1.cpt";
var config =
{
page:page,
sdate:sdate,
edate:edate
};
FR.doHyperlinkByPost(url,config,'_self');
}其中sdate和edate自己页面另外的参数,可以随页面进行相应的修改,这个做了一个判断,如果当前页面大于总页数,则按钮不可用
第五个按钮
主要参数是
page=$page+1
tatol=ROUNDUP(ROWCOUNT("ds1")/20)
然后下面JS中写
if(parseInt(page)-1==parseInt(total))
{
this.setEnable(false);
}
else
{
var url = "${servletURL}?reportlet=SPORTS%2FDiamonds%2FLDN_Consume_20190104_v1.cpt";
var config =
{
page:total,
sdate:sdate,
edate:edate
};
FR.doHyperlinkByPost(url,config,'_self');
}其中sdate和edate自己页面另外的参数,可以随页面进行相应的修改,这个做了一个判断,如果当前页面大于总页数,则按钮不可用,和第五个按钮不同的是page的传参,第五个传递是page,第六个传递是总页数total
第六个按钮
然后下面JS中写
var url = "${servletURL}?reportlet=SPORTS%2FDiamonds%2FLDN_Consume_20190104_v1_detail.cpt&format=excel&extype=stream";
var config =
{
sdate:sdate,
edate:edate
};
FR.doHyperlinkByPost(url,config,'_self'); 这个是做一个导出页面,因为现在按照分页进行查询,每次查询出来只有20条记录
但是导出的话需要导出查到的所有页面
所以需要另做一个导出页,并传参。
主要是在连接后面写
&format=excel&extype=stream
导出页面一般页面名称设置为文件名称后加_detail
所以可以先提前把连接写好。
第五步:
在页面设置中添加一个加载结束后事件
主要参数:
curnum=$page
rownum=ROUNDUP(ROWCOUNT("ds1")/20)
然后下面JS中写
var pv = "第" + curnum + "页/共" +rownum + "页";
contentPane.toolbar.options.items.setValue(pv); 这步是为了给第三个按钮赋值,显示当前页数
第六步:
按钮写一个点击事件
var sdate = this.options.form.getWidgetByName("sdate").getValue();
var edate = this.options.form.getWidgetByName("edate").getValue();
var url = "${servletURL}?reportlet=SPORTS%2FDiamonds%2FLDN_Consume_20190104_v1.cpt";
var config =
{
sdate:sdate,
edate:edate
};
FR.doHyperlinkByPost(url,config,'_self');第七步:
制作导出页面
选择当前页面,然后点击另存为
选在到当前文件夹下,文件名称后加_detail
然后删除导出页面的ds1数据集
点击主数据集
去掉 limit ${P},20
点击web属性,分页设置
去掉按钮
去掉加载结束后事件
去掉模板参数
去掉参数面板上的控件
去掉参数面板的加载结束后事件
然后点击web属性,基本中把标题补全,一般为系统上目录路径名称
static/image/hrline/1.gif
到现在为止,基本上分页功能就可以实现了。为了页面更加好看一些,我这边的一些页面统一样式
页面设置
长度可以根据表格大小进行设置
高度可以设置为150毫米,这样一页20行基本不会出现滚动条
表头颜色e3f3ff
各行换色背景f2f7fd
web属性中,按钮背景设置为白色
参数面板设置为白色,
添加初始化后事件
setTimeout(function() { $('.parameter-container-collapseimg-up').hide(); }, 10);
日期设置显示格式为日期格式
编辑于 2019-3-19 21:20