《DWZ笔记二》分页组件使用
分页思路服务器返回当前页的数据,总条数,再由js来生成分页标签。分页是配合服务器端来处理的, 不是存js做的分页。
因为如果数据量很大,比如有好几百页,存js分页就是悲剧了,存js分页是必须一次载入所有数据,性能很慢。
分页组件参数要由服务器传过来targetType,totalCount,numPerPage,pageNumShown,currentPage
框架会自动把下面的form中pageNum修改后,ajax重新发请求。下面这个form是用来存查询条件的
<formid="pagerForm"action="xxx"method="post">
<inputtype="hidden"name="pageNum"value="1"/>/><!--【必须】value=1可以写死-->
<inputtype="hidden"name="numPerPage"value="20"/><!--【可选】每页显示多少条-->
<inputtype="hidden"name="orderField"value="xxx"/><!--【可选】查询排序-->
<inputtype="hidden"name="orderDirection"value="asc"/><!--【可选】升序降序-->
<!--【可选】其它查询条件,业务有关,有什么查询条件就加什么参数。
也可以在searchForm上设置属性rel=”pagerForm”,js框架会自动把searchForm搜索条件复制到pagerForm中 -->
<inputtype="hidden"name="name"value="xxx"/>
<inputtype="hidden"name="status"value="active"/>
……
</form>
分页组件处理分页流程:
1) pagerForm中缓存了当前的查询条件,加上一个pageNum字段
2) 点击分页时动态修改pageNum,重新提交pagerForm
分页组件使用方法:
<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>
测试方法,currentPage从1改为2,就是第2页了,把上面那句改为:
<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="2"></div>
参数说明:
targetType: navTab或dialog,用来标记是navTab上的分页还是dialog上的分页
totalCount:总条数
numPerPage:每页显示多少条
pageNumShown:页标数字多少个
currentPage:当前是第几页
注意:
服务器端返回一个页面碎片,其中包括pagerForm, table, 和分页的div。只要把这个页面碎片组装好就行。
2、DWZ的分页组件使用如下:
根据文档的说明,要使用分页组件,页面中首先需要一个form,最简单的form必须包含一个pageNum参数;
<form id="pagerForm" action="xxx" method="post">
<input type="hidden" name="pageNum" value="1" />/><!--【必须】value=1可以写死-->
............其它参数根据需要添加
</form>
其次,分页组件参数要由服务器传过来,包括totalCount,numPerPage,pageNumShown,currentPage等,然后对分页进行组装:
<div class="pagination" targetType="navTab" totalCount="总条数" numPerPage="每页数量" pageNumShown="页标数字个数" currentPage="当前页数"></div>
例子页面如下:
<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<%@taglib uri="/struts-tags" prefix="s" %>
<!--分页的form-->
<form id="pagerForm" action="<%=basePath%>/admin/customer_main.action" method="post">
<inputtype="hidden"name="pageNum"value="1"/><!--【必须】value=1可以写死-->
<inputtype="hidden"name="numPerPage"value="${param.numPerPage}"/>-->
</form>
<divclass="pageHeader">
<!--查询的form-->
<form rel="pageForm" onsubmit="return navTabSearch(this);" action="<%=basePath%>/admin/customer_main.action" method="post">
<divclass="searchBar">
<ulclass="searchContent">
<li>
<label>我的客户:</label>
<inputname="keywords"type="text"size="25"value="${param.keywords}"alt="请输入客户名"/>
</li>
</ul>
<divclass="subBar">
<ul>
<li><divclass="buttonActive"><divclass="buttonContent"><buttontype="submit">检索</button></div></div></li>
<li><aclass="button"href="demo_page6.html"target="dialog"mask="true"title="查询框"><span>高级检索</span></a></li>
</ul>
</div>
</div>
</form>
</div>
<divclass="pageContent">
<divclass="panelBar">
<ulclass="toolBar">
<li><inputtype="checkbox"class="checkboxCtrl"group="ids"/>全选</li>
<li><a title="确实要删除这些记录吗?" target="selectedTodo" rel="ids" postType="string" href="<%=basePath%>/admin/customer_deleteAll.action" class="delete"><span>批量删除</span></a></li>
<li><a class="add" href="<%=basePath%>/admin/customer_addInput.jsp" target="navTab"><span>添加</span></a></li>
<li><aclass="delete"href="customer_delete.action?customer.id={cid}"target="ajaxTodo"title="确定要删除吗?"><span>删除</span></a></li>
<li><aclass="edit"href="customer_updateInput.action?id={cid}"target="navTab"><span>修改</span></a></li>
<liclass="line">line</li>
<li><aclass="icon"href="demo/common/dwz-team.xls"target="dwzExport"targetType="navTab"title="实要导出这些记录吗?"><span>导出EXCEL</span></a></li>
</ul>
</div>
<tableclass="table"width="100%"layoutH="150">
<thead>
<tr>
<thwidth="50">选择</th>
<thwidth="120">序号</th>
<th>客户昵称</th>
<thwidth="100">客户名</th>
<thwidth="150">客户类型</th>
<thwidth="80"align="center">客户状态</th>
<thwidth="80">客户邮箱</th>
<thwidth="80">创建时间</th>
<thwidth="80">上次登录时间</th>
<thwidth="80">上次登录IP</th>
</tr>
</thead>
<tbody>
<s:iteratorvalue="customers"var="c">
<trtarget="cid"rel="${c.id}">
<td><inputtype="checkbox"name="ids"value="${c.id}"/></td>
<td>${c.id}</td>
<td>${c.cus_id}</td>
<td>${c.cus_name}</td>
<td><s:iftest='#c.cus_type=="2"'>普通客户</s:if><s:else>管理员</s:else></td>
<td><s:iftest='#c.cus_isLock=="0"'>正常使用</s:if><s:else>用户锁定</s:else></td>
<td>${c.cus_email}</td>
<td>${c.cus_createtime}</td>
<td>${c.last_logintime}</td>
<td>${c.last_loginip}</td>
</tr>
</s:iterator>
</tbody>
</table>
<divclass="panelBar">
<divclass="pages">
<span>显示</span>
<selectclass="combox"name="numPerPage"onchange="navTabPageBreak({numPerPage:this.value})">
<optionvalue="20">20</option>
<optionvalue="10">10</option>
<optionvalue="30">30</option>
<optionvalue="500">50</option>
<optionvalue="100">100</option>
</select>
<span>条,共${pager.totalCount}条</span>
</div>
<!--分页组件-->
<divclass="pagination"targetType="navTab"totalCount="${pager.totalCount}"numPerPage="${pager.everyPage}"pageNumShown="10"currentPage="${pager.currentPage}"></div>
</div>
</div>
运行说明:
<form id="pagerForm" action="<%=basePath%>/admin/customer_main.action" method="post">
<input type="hidden" name="pageNum" value="1" /><!--【必须】value=1可以写死-->
<input type="hidden" name="numPerPage" value="${param.numPerPage}" />-->
</form>
如:点击下一页,form中的pageNum由1变成2,并根据action的url传送至后台,因此在后台中,需要定义一个变量pageNum来接收这个参数,同时将pageNum赋值给当前页面currentPage,剩下的就是后台分页处理。
后台action中,java文件定义:
privateint pageNum=1;//dwz分页使用
public int getPageNum() {
return pageNum;
}
publicvoid setPageNum(int pageNum){
this.pageNum = pageNum;
}
//分页,pager是用户自定义的分页Pager类,包含了分页组件需要返回的参数
public String pageHandle()throws Exception{
System.out.println(this.keywords+".........numPerPage:"+this.numPerPage);
this.pager.setCurrentPage(this.pageNum);
System.out.println(this.pageNum+":pageNum");
this.pager.setEveryPage(this.numPerPage);
System.out.println(pager.getEveryPage());
String tableName="Customer";//查询Customer表
this.pager.setPageName(tableName);
String conditionString="";
if(!this.keywords.trim().equals(""))
{
conditionString ="id>0 and cus_name like '%"+keywords.trim()+"%' ";
System.out.println(conditionString);
}
else
conditionString="id>0 ";//设置查询条件即sql中where后面的语句
this.pager.setConString(conditionString);
System.out.println(pager.getCurrentPage());
Result result = pagerProduct.listProduct(pager);
//获取新的page,此时的page已经包所有的信息
this.pager = result.getPager();
this.customers =(List<Customer>)result.getContent();
return SUCCESS;
}
运行结果:
附:
为了方便使用DWZ的分页功能,后台中,可以自定一个简单的Page类,对页面碎片的参数进行接收:
Page.java
publicclassPage{
//当前页数
privateint currentPage =1;
//每页显示数量
privateint everyPage =10;
//总页数
privateint totalPage;
//总数量
privateint totalCount;
//可以将dwz传过来的pageNum、numPerPage进行初始化
publicPage(int pageNum ,int numPerPage){
this.currentPage = pageNum;
this.everyPage = numPerPage;
}
publicint getTotalPage(){
return totalPage;
}
publicvoid setTotalPage(int totalPage){
this.totalPage = totalPage;
}
//设置总数量的同时,设置总页数
public void setCount(int totalCount){
this.totalCount = totalCount;
int temp =0;
if(totalCount %this.everyPage !=0){
temp++;
}
this.totalPage = totalCount /this.everyPage + temp;
}
publicint getCurrentPage(){
return currentPage;
}
publicint getEveryPage(){
return everyPage;
}
publicint getTotalCount(){
return totalCount;
}
}
因为使用了DWZ的功能,所以Page类的属性可以写的比较简单,往常的page根据需要,一般还有像hasPrePage(是否有上一页)、hasNextPage(是否有下一页)、beginIndex(起始点)等等参数..
相关推荐
1.版本:matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理,供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。感谢CSDN官方提供大家交流的平台
libADLMIDI1-1.5.0-bp153.1.1.x86_64.rpm 是用于在 x86_64 架构的设备上安装的 RPM 包,具体功能如下: 名称:libADLMIDI1 版本:1.5.0 摘要:带有 OPL3 (YMF262) 模拟器的软件 MIDI 合成器库 许可证:GPL-3.0-only 和 LGPL-3.0-only 该库提供了一个基于 ADLMIDI 的软件 MIDI 合成器,它模拟了 OPL3 音源芯片(FM 合成)。它可以通过使用 ADLMIDI 库来实现多平台的 MIDI 播放和 OPL3 模拟。 该 RPM 包适用于 x86_64 架构,用于在相关设备上安装 libADLMIDI1 库文件。库文件包括: /usr/lib64/libADLMIDI.so.1 和 /usr/lib64/libADLMIDI.so.1.5.0:库文件 /usr/share/doc/packages/libADLMIDI1/AUTHORS、/usr/share/doc/packages/libADLMIDI1/README.md 等文档文件:文档文件
基于qt+C++实现u盘插拔检测.+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于qt+C++实现u盘插拔检测.+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于qt+C++实现u盘插拔检测.+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于qt+C++实现u盘插拔检测.+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~
Quectel_Product_Brochure_CN_V7.9.pdf
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理,供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。感谢CSDN官方提供大家交流的平台
phpstudy
python入门
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理,供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。感谢CSDN官方提供大家交流的平台
移动机器人机械臂的设计开题报告.doc
用法链接:https://menghui666.blog.csdn.net/article/details/137977678?spm=1001.2014.3001.5502 基于QT+C++开发的智能平台访客系统+源码,包含主界面、系统设置、警情查询、调试帮助、用户退出功能。 基于QT+C++开发的智能平台访客系统+源码,包含主界面、系统设置、警情查询、调试帮助、用户退出功能。 基于QT+C++开发的智能平台访客系统+源码,包含主界面、系统设置、警情查询、调试帮助、用户退出功能。
三菱机械臂校点说明.pptx
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理,供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。感谢CSDN官方提供大家交流的平台
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理,供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。感谢CSDN官方提供大家交流的平台
C语言诞生于美国的贝尔实验室,由丹尼斯·里奇(Dennis MacAlistair Ritchie)以肯尼斯·蓝·汤普森(Kenneth Lane Thompson)设计的B语言为基础发展而来,在它的主体设计完成后,汤普森和里奇用它完全重写了UNIX,且随着UNIX的发展,c语言也得到了不断的完善。为了利于C语言的全面推广,许多专家学者和硬件厂商联合组成了C语言标准委员会,并在之后的1989年,诞生了第一个完备的C标准,简称“C89”,也就是“ANSI C”,截至2020年,最新的C语言标准为2018年6月发布的“C18”。 [5] C语言之所以命名为C,是因为C语言源自Ken Thompson发明的B语言,而B语言则源自BCPL语言。 1967年,剑桥大学的Martin Richards对CPL语言进行了简化,于是产生了BCPL(Basic Combined Programming Language)语言。
python入门 单元测试和测试用例 Python标准库中的模块unittest提供了代码测试工具。 单元测试用于核实函数的某个防霾呢没有问题; 测试用例是一组单元测试,这些单元测试仪器一起核实函数在各种情形下的行为都符合要求。良好的测试用例考虑到了函数可能收到的各种收入,包含所有针对这些情形的测试。 全覆盖式测试用例包含一整套单元测试,涵盖了各种可能的函数使用方式。 对于大型项目,要实现全覆盖可能很难。通常,最初只要对针对代码的重要行为编写测试即可,等项目给广泛使用时再考虑全覆盖。 可通过的测试 创建测试用例的语法需要一段时间才能习惯,但测试用例创建后,再添加针对函数的单元测试就很简单了。要为函数编写测试用例,可先导入模块unittest以及要测试的函数,在创建一个继承unittest.TestCase的类,并编写一系列方法对函数行为的不同方面进行测试。 下面test_name_function.py一个只包含一个方法的测试用例,它检查函数get_formatted_name()在给定名和姓时能否正确的工作。
基于matlabbenders分解算法.zip
dsp工程设计讲座.ppt
Adams空间复杂机械臂动力学仿真研究.doc
【资源说明】 基于Android+OpenCV的车牌识别系统源码+使用文档+全部资料(优秀项目).zip基于Android+OpenCV的车牌识别系统源码+使用文档+全部资料(优秀项目).zip基于Android+OpenCV的车牌识别系统源码+使用文档+全部资料(优秀项目).zip 【备注】 1、该项目是个人高分毕业设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!