自定义的分页组件
2018-11-16 本文已影响0人
青椒盖饭
-
使用方法,在要进行分页的页面,使用jsp:include 标签动态包含本组件
该组件需要的参数有- url 需要进行分页的网页路径
- currentPage 定义当前所在页数,如果没有定义,则默认是第一页
- linesize 定义每页显示的数据个数,如果没有定义,则默认是5行
- allRecorders 保存总记录的统计结果,需要从包含页面传入
- column 模糊查询的数据列
- keyWord 模糊查询的关键字
-
组件内容
<%@ page pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/style.css">
<%
request.setCharacterEncoding("UTF-8") ;
String url = request.getParameter("url") ; // 提交路径
int currentPage = 1 ; // 当前所在的页面，默认是在第1页
int lineSize = 1 ; // 表示每页显示的数据行数
int allRecorders = 0 ; // 保存总记录的统计结果
int pageSize = 1 ; // 总页数
String column = request.getParameter("column") ;
String keyWord = request.getParameter("keyWord") ;
%>
<%
try {
currentPage = Integer.parseInt(request.getParameter("currentPage")) ;
} catch (Exception e) {}
try {
lineSize = Integer.parseInt(request.getParameter("lineSize")) ;
} catch (Exception e) {}
try {
allRecorders = Integer.parseInt(request.getParameter("allRecorders")) ;
} catch (Exception e) {}
if ("null".equals(column) || column == null || "".equals(column)) {
column = "" ;
}
if ("null".equals(keyWord) || keyWord == null || "".equals(keyWord)) {
keyWord = "" ;
}
%>
<%
int seed = 2 ; // 定义一个种子数，用于判断是否会有“.”
if (allRecorders > 0) {
pageSize = (allRecorders + lineSize - 1) / lineSize ;
}
%>
<div id="pageCtl">
<ul class="pagination">
<li class="<%=currentPage == 1? "active" : ""%>">
<%
if (currentPage == 1) {
%>
<span>1</span>
<%
} else {
%>
<a href="<%=url%>?cp=<%=1%>&ls=<%=lineSize%>&col=<%=column%>&kw=<%=keyWord%>">1</a></li>
<%
}
%>
<%
if (pageSize > seed * 2) { // 数据量很大，需要进行省略号的出现
if (currentPage <= seed * 2) {
int startPage = 2 ; // 从第2页开始显示
int endPage = currentPage + seed * 2 ;
if (endPage >= pageSize) {
endPage = pageSize - 1 ;
}
for (int x = startPage ; x <= endPage ; x ++) {
%>
<li class="<%=currentPage == x ? "active" : ""%>"><a href="<%=url%>?cp=<%=x%>&ls=<%=lineSize%>&col=<%=column%>&kw=<%=keyWord%>"><%=x%></a></li>
<%
}
if ((currentPage + seed * 2) < pageSize - 1) {
%>
<li class="disabled"><span>...</span></li>
<%
}
} else { // 需要分两段显示了
%>
<li class="disabled"><span>...</span></li>
<%
int startPage = currentPage - seed ;
int endPage = currentPage + seed ;
if (endPage >= pageSize) {
endPage = pageSize - 1 ;
}
for (int x = startPage ; x <= endPage ; x ++) {
%>
<li class="<%=currentPage == x ? "active" : ""%>"><a href="<%=url%>?cp=<%=x%>&ls=<%=lineSize%>&col=<%=column%>&kw=<%=keyWord%>"><%=x%></a></li>
<%
}
if ((currentPage + seed * 2) < pageSize) { // 后面还有很多页
%>
<li class="disabled"><span>...</span></li>
<%
} else { // 后续的页码需要出现
for (int x = currentPage + seed + 1 ; x < pageSize ; x ++ ) {
%>
<li class="<%=currentPage == x ? "active" : ""%>"><a href="<%=url%>?cp=<%=x%>&ls=<%=lineSize%>&col=<%=column%>&kw=<%=keyWord%>"><%=x%></a></li>
<%
}
}
}
}
%>
<%
if (pageSize != 1) {
%>
<li class="<%=currentPage == pageSize ? "active" : ""%>">
<%
if (currentPage == pageSize) {
%>
<span><%=pageSize%></li>
<%
} else {
%>
<a href="<%=url%>?cp=<%=pageSize%>&ls=<%=lineSize%>&col=<%=column%>&kw=<%=keyWord%>"><%=pageSize%></a>
<%
}
%>
</li>
<%
}
%>
</ul>
</div>
- 使用示例
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="cn.mldn.service.*" %>
<%@ page import="cn.mldn.util.factory.*" %>
<%@ page import="cn.mldn.vo.*" %>
<%@ page import="java.util.*" %>
<html>
<head>
<%
request.setCharacterEncoding("utf-8");
String basePath = request.getScheme() + "://" +
request.getServerName() + ":" + request.getServerPort() +
request.getContextPath() + "/" ;
%>
<%!
public static final String GOODS_LIST_URL="oages/back/admin/goods/goods_list.jsp";
public static final String GOODS_ADD_URL = "pages/back/admin/goods/goods_add.jsp" ;
public static final String GOODS_DELETE_URL = "pages/back/admin/goods/goods_delete_do.jsp" ;
public static final String GOODS_EDIT_URL = "pages/back/admin/goods/goods_edit.jsp" ;
%>
<%
//定义当前所在页数,默认为第一页
int currentPage = 1;
//定义每页显示的数据个数,默认是每页显示5行数据
int lineSize = 5;
//定义总页数默认为1
int pageSize = 1;
//保存总记录数
int allRecorders = 0;
//定义模糊查询的数据列
//在搜索分页组件中,会自动将字符串进行拆分处理,字符串格式为"显示的文字信息:模糊查询数据列名称"
String columnData = "商品名称:name";
//column和keyWord的参数是在分页搜索组件中获取到的
String column=request.getParameter("col");
String keyWord=request.getParameter("ky");
//从页面中接收定义的当前所在页 和 每页显示个数的信息
//其中cp表示当前所在页,ls表示每页显示的个数
//由于数据类型的转换异常无法处理,所以直接在浏览器中抛出异常
try{
currentPage = Integer.parseInt(request.getParameter("cp"));
}catch(Exception e){}
try{
currentPage = Integer.parseInt(request.getParameter("ls"));
}catch(Exception e){}
//实例化IGoodsService接口,使用list()方法,取出分页查询的数据
IGoodsService goodsService = Factory.getServiceInstance("goods.service");
Map<String,Object> map = goodsService.list(currentPage, lineSize, column, keyWord);
//取出所有商品信息
List<Goods> allGoods = (List<Goods>)map.get("allGoods");
//取出所有商品数量信息
allRecorders = (Integer)map.get("goodsCount");
//取出所有商品分类信息
Map<Integer,String> allItems = (Map<Integer,String>)map.get("allItems");
%>
<base href="<%=basePath%>"/>
<title>商品列表</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="js/common/mldn_util.js"></script>
<script type="text/javascript" src="js/back/admin/goods/goods_list.js"></script>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
jsDeleteUrl = "<%=basePath + GOODS_DELETE_URL%>"
</script>
<link rel="stylesheet" type="text/css"
href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="h1"><strong><span class="glyphicon glyphicon-th-list"></span> 商品信息列表</strong></div>
</div>
<div class="row">
<!-- 在页面中包含搜索分页组件 -->
<jsp:include page="/pages/plugins/split_plugin_search_bar.jsp">
<jsp:param value="<%= GOODS_LIST_URL%>" name="url"/>
<jsp:param value="<%= column%>" name="column"/>
<jsp:param value="<%= keyWord%>" name="keyword"/>
<jsp:param value="<%= allRecorders%>" name="allRecorders"/>
<jsp:param value="<%= columnData%>" name="columnData"/>
</jsp:include>
<table class="table table-striped table-bordered table-hover">
<tr>
<td style="width:5%"><input type="checkbox" id="selectall"/></td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品分类</td>
<td>操作</td>
</tr>
<%
//取出所有商品信息,进行动态生成页面
Iterator<Goods> ite = allGoods.iterator();
while(ite.hasNext()){
Goods temp = ite.next();
%>
<tr>
<td><input type="checkbox" id="gid" value="<%=temp.getGid()%>"/></td>
<td><%=temp.getName() %></td>
<td><%=temp.getPrice() %></td>
<td><%= allItems.get(temp.getIid())%></td>
<td><a href="<%=GOODS_EDIT_URL%>?gid=<%=temp.getGid() %>" class="btn btn-warning btn-xs">
<span class="glyphicon glyphicon-pencil"></span> 编辑</a></td>
</tr>
<%
}
%>
</table>
<!-- 包含分页组件 -->
<jsp:include page="/pages/plugins/split_plugin_page_bar.jsp">
<jsp:param value="<%= GOODS_LIST_URL%>" name="url"/>
<jsp:param value="<%= currentPage%>" name="currentPage"/>
<jsp:param value="<%= keyWord%>" name="keyWord"/>
<jsp:param value="<%= column%>" name="column"/>
<jsp:param value="<%= lineSize%>" name="lineSize"/>
<jsp:param value="<%= allRecorders%>" name="allRecorders"/>
</jsp:include>
<button id="deleteBtn" class="btn btn-danger btn-lg">
<span class="glyphicon glyphicon-trash"></span> 删除选中部信息
</button>
</div>
</div>
</body>
</html>
- 页面效果
image.png
