分页介绍
分页思路服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的, 不是存js做的分页。 因为如果数据量很大，比如有好几百页，性能很慢。
分页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage 。框架会自动把下面的form中pageNum修改后，ajax重新发请求。下面这个form是用来存查询条件的
<form id="pagerForm" action="xxx" method="post"> <input type="hidden" name="pageNum" value="1" />/><!--【必须】value=1可以写死--> <input type="hidden" name="numPerPage" value="20" /><!--【可选】每页显示多少条--> <input type="hidden" name="orderField" value="xxx" /><!--【可选】查询排序--> <input type="hidden" name="orderDirection" value="asc" /><!--【可选】升序降序--> <!-- 其它查询条件，业务有关，有什么查询条件就加什么参数。 还有一中方式，就是我们下面使用的，可以在searchForm上设置属性rel=”pagerForm”，js框架会自动把searchForm搜索条件复制到pagerForm中 --> <input type="hidden" name="name" value="xxx" /> <input type="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上的分页 （dialog是弹窗窗口的模式，如果是dialog那么下面对应的targetType和onsubmit="return
navTabSearch(this);" 等都要修改(dialogSearch(this))）
totalCount: 总条数
numPerPage: 每页显示多少条
pageNumShown: 页标数字多少个
currentPage: 当前是第几页
注意：
服务器端返回一个页面碎片，其中包括pagerForm, table, 和分页的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"> <input type="hidden" name="pageNum" value="1" /> <input type="hidden" name="numPerPage" value="${param.numPerPage}" />--></form>
<div class="pageHeader">
<!--查询的form--><form rel="pageForm" onsubmit="return navTabSearch(this);" action="<%=basePath%>/admin/customer_main.action" method="post"> <div class="searchBar"> <ul class="searchContent"> <li> <label>我的客户：</label> <input name="keywords" type="text" size="25" value="${param.keywords}" alt="请输入客户名"/> </li> </ul> <div class="subBar"> <ul> <li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li> <li><a class="button" href="demo_page6.html" target="dialog" mask="true" title="查询框"><span>高级检索</span></a></li> </ul> </div> </div> </form></div>
<div class="pageContent"> <div class="panelBar"> <ul class="toolBar"> <li><input type="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><a class="delete" href="customer_delete.action?customer.id={cid}" target="ajaxTodo" title="确定要删除吗?"><span>删除</span></a></li> <li><a class="edit" href="customer_updateInput.action?id={cid}" target="navTab"><span>修改</span></a></li> <li class="line">line</li> <li><a class="icon" href="demo/common/dwz-team.xls" target="dwzExport" targetType="navTab" title="实要导出这些记录吗?"><span>导出EXCEL</span></a></li> </ul> </div> <table class="table" width="100%" layoutH="150"> <thead> <tr> <th width="50">选择</th> <th width="120">序号</th> <th>客户昵称</th> <th width="100">客户名</th> <th width="150">客户类型</th> <th width="80" align="center">客户状态</th> <th width="80">客户邮箱</th> <th width="80">创建时间</th> <th width="80">上次登录时间</th> <th width="80">上次登录IP</th> </tr> </thead> <tbody> <s:iterator value="customers" var="c"> <tr target="cid" rel="${c.id}"> <td><input type="checkbox" name="ids" value="${c.id}" /></td> <td>${c.id}</td> <td>${c.cus_id}</td> <td>${c.cus_name}</td> <td><s:if test=‘#c.cus_type=="2"‘>普通客户</s:if><s:else>管理员</s:else></td> <td><s:if test=‘#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> <div class="panelBar"> <div class="pages"> <span>显示</span> <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"> <option value="20">20</option> <option value="10">10</option> <option value="30">30</option> <option value="500">50</option> <option value="100">100</option> </select> <span>条，共${pager.totalCount}条</span> </div> <!--分页组件--> <div class="pagination" targetType="navTab" totalCount="${pager.totalCount}" numPerPage="${pager.everyPage}" pageNumShown="10" currentPage="${pager.currentPage}"></div>
</div> </div>
运行效果
实际项目参考代码：链接：http://pan.baidu.com/s/1jG5Vp9G 密码：t9hr 密码是我的真实名字的拼音
以上整理自实际项目和网络~
时间： 2025-01-09 07:29:28