详细分页步骤

剧终

这个帖子是因为目前工作中需要做真分页功能，然后人员呢技术参差不齐，导致工期经常延期所以整理一个分页步骤，按照步骤进行，基本上分页功能可以控制到40分钟左右（包含导出页面制作,熟练之后可以控制在20分钟）

第一步：
新增一个模板参数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[2].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属性，基本中把标题补全，一般为系统上目录路径名称

到现在为止，基本上分页功能就可以实现了。为了页面更加好看一些，我这边的一些页面统一样式
页面设置
长度可以根据表格大小进行设置
高度可以设置为150毫米，这样一页20行基本不会出现滚动条
表头颜色e3f3ff
各行换色背景f2f7fd
web属性中，按钮背景设置为白色
参数面板设置为白色，
添加初始化后事件
setTimeout(function() { $('.parameter-container-collapseimg-up').hide(); }, 10);
日期设置显示格式为日期格式

编辑于 2019-3-19 21:20