-
使用方法,在要進(jìn)行分頁的頁面,使用jsp:include 標(biāo)簽動(dòng)態(tài)包含本組件
該組件需要的參數(shù)有- url 需要進(jìn)行分頁的網(wǎng)頁路徑
- currentPage 定義當(dāng)前所在頁數(shù),如果沒有定義,則默認(rèn)是第一頁
- linesize 定義每頁顯示的數(shù)據(jù)個(gè)數(shù),如果沒有定義,則默認(rèn)是5行
- allRecorders 保存總記錄的統(tǒng)計(jì)結(jié)果,需要從包含頁面?zhèn)魅?/li>
- column 模糊查詢的數(shù)據(jù)列
- keyWord 模糊查詢的關(guān)鍵字
組件內(nèi)容
<%@ 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 ; // 當(dāng)前所在的頁面，默認(rèn)是在第1頁
int lineSize = 1 ; // 表示每頁顯示的數(shù)據(jù)行數(shù)
int allRecorders = 0 ; // 保存總記錄的統(tǒng)計(jì)結(jié)果
int pageSize = 1 ; // 總頁數(shù)
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 ; // 定義一個(gè)種子數(shù)，用于判斷是否會(huì)有“.”
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) { // 數(shù)據(jù)量很大，需要進(jìn)行省略號(hào)的出現(xiàn)
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 { // 后續(xù)的頁碼需要出現(xiàn)
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" ;
%>
<%
//定義當(dāng)前所在頁數(shù),默認(rèn)為第一頁
int currentPage = 1;
//定義每頁顯示的數(shù)據(jù)個(gè)數(shù),默認(rèn)是每頁顯示5行數(shù)據(jù)
int lineSize = 5;
//定義總頁數(shù)默認(rèn)為1
int pageSize = 1;
//保存總記錄數(shù)
int allRecorders = 0;
//定義模糊查詢的數(shù)據(jù)列
//在搜索分頁組件中,會(huì)自動(dòng)將字符串進(jìn)行拆分處理,字符串格式為"顯示的文字信息:模糊查詢數(shù)據(jù)列名稱"
String columnData = "商品名稱:name";
//column和keyWord的參數(shù)是在分頁搜索組件中獲取到的
String column=request.getParameter("col");
String keyWord=request.getParameter("ky");
//從頁面中接收定義的當(dāng)前所在頁 和 每頁顯示個(gè)數(shù)的信息
//其中cp表示當(dāng)前所在頁,ls表示每頁顯示的個(gè)數(shù)
//由于數(shù)據(jù)類型的轉(zhuǎn)換異常無法處理,所以直接在瀏覽器中拋出異常
try{
currentPage = Integer.parseInt(request.getParameter("cp"));
}catch(Exception e){}
try{
currentPage = Integer.parseInt(request.getParameter("ls"));
}catch(Exception e){}
//實(shí)例化IGoodsService接口,使用list()方法,取出分頁查詢的數(shù)據(jù)
IGoodsService goodsService = Factory.getServiceInstance("goods.service");
Map<String,Object> map = goodsService.list(currentPage, lineSize, column, keyWord);
//取出所有商品信息
List<Goods> allGoods = (List<Goods>)map.get("allGoods");
//取出所有商品數(shù)量信息
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>商品單價(jià)</td>
<td>商品分類</td>
<td>操作</td>
</tr>
<%
//取出所有商品信息,進(jìn)行動(dòng)態(tài)生成頁面
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
