分頁(yè)功能的代碼就是這樣的,在需要展示列表的頁(yè)面,我們基本都需要加上分頁(yè)功能,如果某天boss想要修改分頁(yè)功能的樣式,我們不能去一個(gè)一個(gè)的改吧。
下邊給大家分享一個(gè)自己封裝的通用分頁(yè)組件。
1. 效果展示
2. 使用方式
1 )在需要顯示分頁(yè)信息的位置,直接引入pagination.jsp頁(yè)面。
!-- 分頁(yè)內(nèi)容 --> %@include file="/WEB-INF/decorators/pagination.jsp" %> !-- 分頁(yè)內(nèi)容結(jié)束 -->
2 )在java代碼中
Controller層代碼:
@RequiresPermissions("func_vasadmin_userMoneyList") @RequestMapping("/user/money/list") public String list(Model model, ServletRequest request) { // 獲取所有的查詢條件參數(shù)(為了使用方便,所有查詢條件的參數(shù)命名前綴都是"search_") MapString, Object> searchParams = WebUtils.getParametersStartingWith(request, "search_"); // 獲取分頁(yè)頁(yè)碼信息和每頁(yè)條數(shù) int pageNum = PageUtil.getTargetPage(request); int pageSize = PageUtil.getPageSize(request); Page page = new Page(pageSize, pageNum); // 查詢需要展示的內(nèi)容 ListUserMoney> list = vasMoneyService.getUserMoneyList(page,searchParams); model.addAttribute("data", list); model.addAttribute("page", page); // 將搜索條件編碼成字符串,用于排序,分頁(yè)的URL model.addAttribute("searchParams", PageUtil.encodeParameterStringWithPrefix(searchParams, "search_")); return "vasadmin/user_money_list"; }
Service層代碼:
public ListUserMoney> getUserMoneyList(Page page, MapString, Object> searchParams) { // 從map中獲取查詢條件 long userId = (Long) DataConvertUtil.data2(searchParams.get("userId"), DataConvertUtil.DataType.LONG); long minMoney = (Long) DataConvertUtil.data2( searchParams.get("minMoney"), DataConvertUtil.DataType.LONG); long maxMoney = (Long) DataConvertUtil.data2( searchParams.get("maxMoney"), DataConvertUtil.DataType.LONG); // 查詢總條數(shù) int totleElements = vasMoneyDao.getUserMoneyListCount( DataBaseName.DB_TATA_MONEY, userId, minMoney, maxMoney); // 設(shè)置總條數(shù) page.setTotleElements(totleElements); // 查詢需要展示的數(shù)據(jù) return vasMoneyDao.getUserMoneyList(DataBaseName.DB_TATA_MONEY, userId, minMoney, maxMoney, page.getStartNum(), page.getEndNum()); }
**每次需要分頁(yè),只需要操作上邊這兩步,是不是很簡(jiǎn)單啊~~。**接下來(lái),給大家貼出封裝的pagination.jsp代碼,和其它的一些幫助類的代碼。
**3. 代碼示例 **
pagination.jsp (封裝的通用分頁(yè)代碼)
%@ page language="java" pageEncoding="UTF-8"%> %@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> %@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> !-- 分頁(yè)信息 --> div class="row"> div class="col-md-3 page-number"> 每次顯示 select class="form-control input-mini" onchange="self.location.href=options[selectedIndex].value"> option value="?pageNum=1pageSize=10${searchParams}" c:if test="${page.pageSize eq '10' }">selected/c:if>>10/option> option value="?pageNum=1pageSize=50${searchParams}" c:if test="${page.pageSize eq '50' }">selected/c:if>>50/option> option value="?pageNum=1pageSize=100${searchParams}" c:if test="${page.pageSize eq '100' }">selected/c:if>>100/option> /select> 條 /div> div class="col-md-9 paging"> ul class="pagination"> li>a href="#" >共 ${page.totlePages} 頁(yè),${page.totleElements} 條/a>/li> c:if test="${page.hasPrevious == false}"> li class="disabled">a href="#" >首頁(yè)/a>/li> li class="disabled">a href="#" >上一頁(yè)/a>/li> /c:if> c:if test="${page.hasPrevious == true}"> li>a href="?pageNum=1pageSize=${page.pageSize}${searchParams}" rel="external nofollow" >首頁(yè)/a>/li> li>a href="?pageNum=${page.prePage}pageSize=${page.pageSize}${searchParams}" rel="external nofollow" >上一頁(yè)/a>/li> /c:if> c:forEach var="i" begin="${page.begin}" end="${page.end}"> c:choose> c:when test="${i == page.pageNum}"> li class="active">a href="?pageNum=${i}pageSize=${page.pageSize}${searchParams}" rel="external nofollow" rel="external nofollow" >${i}/a>/li> /c:when> c:otherwise> li>a href="?pageNum=${i}pageSize=${page.pageSize}${searchParams}" rel="external nofollow" rel="external nofollow" >${i}/a>/li> /c:otherwise> /c:choose> /c:forEach> c:if test="${page.hasNext == true}"> li>a href="?pageNum=${page.nextPage}pageSize=${page.pageSize}${searchParams}" rel="external nofollow" >下一頁(yè)/a>/li> li>a href="?pageNum=${page.totlePages}pageSize=${page.pageSize}${searchParams}" rel="external nofollow" >末頁(yè)/a>/li> /c:if> c:if test="${page.hasNext == false}"> li class="disabled">a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁(yè)/a>/li> li class="disabled">a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >末頁(yè)/a>/li> /c:if> /ul> /div> /div> !-- 分頁(yè)信息結(jié)束 -->
Page.java (分頁(yè)信息類)
public class Page implements Serializable { private static final long serialVersionUID = 1L; public Page(int pageSize, int pageNum) { if(pageSize > 0 ){ this.pageSize = pageSize; } if(pageNum > 0){ this.pageNum = pageNum; } } /** * 初始化各個(gè)值 */ public void initValue(){ // 計(jì)算總共有多少頁(yè) totlePages = (int)Math.ceil(totleElements * 1.0 / pageSize); if(totlePages == 0){ totlePages = 1; } // 頁(yè)碼矯正 if(pageNum = 0){ pageNum = 1; } if(pageNum > totlePages){ pageNum = totlePages; } // 是否有上一頁(yè)和首頁(yè) if(pageNum > 1){ hasPrevious = true; prePage = pageNum - 1; } // 是否有下一頁(yè)和尾頁(yè) if(totlePages > pageNum){ hasNext = true; nextPage = pageNum + 1; } // 分頁(yè)頁(yè)碼開始數(shù)值 begin = Math.max(1, pageNum - paginationSize/2); // 分頁(yè)頁(yè)碼結(jié)束數(shù)值 end = Math.min(begin + (paginationSize - 1), totlePages); } /** * 分頁(yè)下標(biāo)最多顯示多少頁(yè) */ private int paginationSize = 10; /** * 頁(yè)碼開始 */ private int begin = 1; /** * 頁(yè)碼結(jié)束 */ private int end = 1; /** * 每頁(yè)顯示多少條 */ private int pageSize = 15; /** * 當(dāng)前頁(yè)碼 */ private int pageNum = 1; /** * 是否有下一頁(yè) */ private boolean hasNext = false; /** * 是否有上一頁(yè) */ private boolean hasPrevious = false; /** * 下一頁(yè)的頁(yè)碼 */ private int nextPage; /** * 上一頁(yè)的頁(yè)碼 */ private int prePage; /** * 總頁(yè)數(shù) */ private int totlePages = 1; /** * 總條數(shù) */ private int totleElements = 0; public static int maxNum = 999999; public int getPaginationSize() { return paginationSize; } public void setPaginationSize(int paginationSize) { this.paginationSize = paginationSize; } public int getBegin() { return begin; } public void setBegin(int begin) { this.begin = begin; } public int getEnd() { return end; } public void setEnd(int end) { this.end = end; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getPageNum() { return pageNum; } public void setPageNum(int pageNum) { this.pageNum = pageNum; } public boolean isHasNext() { return hasNext; } public void setHasNext(boolean hasNext) { this.hasNext = hasNext; } public boolean isHasPrevious() { return hasPrevious; } public void setHasPrevious(boolean hasPrevious) { this.hasPrevious = hasPrevious; } public int getNextPage() { return nextPage; } public void setNextPage(int nextPage) { this.nextPage = nextPage; } public int getPrePage() { return prePage; } public void setPrePage(int prePage) { this.prePage = prePage; } public int getTotlePages() { return totlePages; } public void setTotlePages(int totlePages) { this.totlePages = totlePages; } public int getTotleElements() { return totleElements; } public void setTotleElements(int totleElements) { this.totleElements = totleElements; // 知道總條數(shù)之后,初始化一下其它值 initValue(); } public static void main(String[] args) { System.out.println(Math.min(1, 2)); } /** * 從第幾條開始查詢 * @return */ public int getStartNum(){ return (pageNum -1) * pageSize + 1; } /** * 到第幾條結(jié)束 * @return */ public int getEndNum(){ return pageNum * pageSize; } }
PageUtil.java (分頁(yè)輔助類)
public class PageUtil implements Serializable { private static final long serialVersionUID = 1L; /** * 獲取目標(biāo)頁(yè)碼 * @return */ public static int getTargetPage(ServletRequest request){ int pageNum = 0; String pageNumStr = request.getParameter("pageNum"); if(StringUtils.isNotBlank(pageNumStr)){ try{ pageNum = Integer.valueOf(pageNumStr); }catch(Exception e){ pageNum = 0; } } return pageNum; } /** * 獲取每頁(yè)條數(shù) * @return */ public static int getPageSize(ServletRequest request){ int pageSize = 0; String pageSizeStr = request.getParameter("pageSize"); if(StringUtils.isNotBlank(pageSizeStr)){ try{ pageSize = Integer.valueOf(pageSizeStr); }catch(Exception e){ pageSize = 0; } } return pageSize; } /** * 將Map中的查詢條件,加上前綴,以拼接 * @param map * @param prefix 每個(gè)參數(shù)的前綴 * @return */ public static String encodeParameterStringWithPrefix(MapString,Object> map, String prefix){ if(null == map || map.isEmpty()){ return ""; } StringBuffer sb = new StringBuffer(); IteratorMap.EntryString,Object>> entries = map.entrySet().iterator(); while (entries.hasNext()) { if(StringUtils.isNotEmpty(sb.toString())){ sb.append(""); } Map.EntryString,Object> entry = entries.next(); sb.append(prefix); sb.append(entry.getKey()); sb.append("="); sb.append(entry.getValue()); } return sb.toString(); } }
jsp頁(yè)面中查詢條件參數(shù)編寫示例如下:
!-- 查詢條件 --> div class="col-md-10 search"> form class="form-inline" action="${ctx }/vasadmin/user/money/list" method="get"> div class="form-group"> input type="text" class="form-control input-sm" name="search_userId" value="${param.search_userId }" placeholder="用戶ID" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> /div> div class="form-group"> input type="text" class="form-control input-sm" name="search_minMoney" value="${param.search_minMoney }" placeholder="最小余額" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> /div> div class="form-group"> input type="text" class="form-control input-sm" name="search_maxMoney" value="${param.search_maxMoney }" placeholder="最大余額" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> /div> div class="form-group"> button type="submit" class="btn btn-primary btn-sm"> span class="glyphicon glyphicon-search">/span> 搜索 /button> /div> /form> /div> !-- /查詢條件 -->
源碼下載地址:分頁(yè)源碼
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
標(biāo)簽:黃石 內(nèi)江 銅川 貸款邀約 廣州 樂山 大連 南京
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《JSP實(shí)現(xiàn)帶查詢條件的通用分頁(yè)組件》,本文關(guān)鍵詞 JSP,實(shí)現(xiàn),帶,查詢,條件,的,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。