分頁(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) {
// 獲取所有的查詢(xún)條件參數(shù)（為了使用方便，所有查詢(xún)條件的參數(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);
// 查詢(xún)需要展示的內(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中獲取查詢(xún)條件
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);
// 查詢(xún)總條數(shù)
int totleElements = vasMoneyDao.getUserMoneyListCount(
DataBaseName.DB_TATA_MONEY, userId, minMoney, maxMoney);
// 設(shè)置總條數(shù)
page.setTotleElements(totleElements);
// 查詢(xún)需要展示的數(shù)據(jù)
return vasMoneyDao.getUserMoneyList(DataBaseName.DB_TATA_MONEY, userId,
minMoney, maxMoney, page.getStartNum(), page.getEndNum());
}
**每次需要分頁(yè)，只需要操作上邊這兩步，是不是很簡(jiǎn)單啊~~。**接下來(lái)，給大家貼出封裝的pagination.jsp代碼，和其它的一些幫助類(lèi)的代碼。
**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è)信息類(lèi)）
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è)碼開(kāi)始數(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è)碼開(kāi)始
*/
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));
}
/**
* 從第幾條開(kāi)始查詢(xún)
* @return
*/
public int getStartNum(){
return (pageNum -1) * pageSize + 1;
}
/**
* 到第幾條結(jié)束
* @return
*/
public int getEndNum(){
return pageNum * pageSize;
}
}
PageUtil.java （分頁(yè)輔助類(lèi)）
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中的查詢(xún)條件，加上前綴，以拼接
* @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è)面中查詢(xún)條件參數(shù)編寫(xiě)示例如下：
!-- 查詢(xún)條件 -->
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="用戶(hù)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>
!-- /查詢(xún)條件 -->
源碼下載地址：分頁(yè)源碼
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- JavaScript中條件語(yǔ)句的優(yōu)化技巧總結(jié)
- 如何利用JavaScript編寫(xiě)更好的條件語(yǔ)句詳解
- 詳解寫(xiě)好JS條件語(yǔ)句的5條守則
- 分享5個(gè)小技巧讓你寫(xiě)出更好的 JavaScript 條件語(yǔ)句
- JavaScript中的條件判斷語(yǔ)句使用詳解
- JScript中的條件注釋詳解
- Javascript基礎(chǔ)教程之if條件語(yǔ)句
- javascript里的條件判斷
- 淺談JS如何寫(xiě)出漂亮的條件表達(dá)式
