1. 程式人生 > >JSP通用分頁元件,帶查詢條件

JSP通用分頁元件,帶查詢條件

—— 如果一段程式碼重複出現的次數多了,我們就需要把它獨立出來!

分頁功能的程式碼就是這樣的,在需要展示列表的頁面,我們基本都需要加上分頁功能,如果某天boss想要修改分頁功能的樣式~,天吶~~,我們不能去一個一個的改吧。

下邊給大家分享一個自己封裝的通用分頁元件。

1. 效果展示
這裡寫圖片描述

2. 使用方式

1 )在需要顯示分頁資訊的位置,直接引入pagination.jsp頁面。

<!-- 分頁內容 -->
    <%@include file="/WEB-INF/decorators/pagination.jsp" %>
<!-- 分頁內容結束 -->

2 ) 在java程式碼中

Controller層程式碼:

@RequiresPermissions("func_vasadmin_userMoneyList")
@RequestMapping("/user/money/list")
public String list(Model model, ServletRequest request) {

    // 獲取所有的查詢條件引數(為了使用方便,所有查詢條件的引數命名字首都是"search_")
    Map<String, Object> searchParams = WebUtils.getParametersStartingWith(request, "search_"
); // 獲取分頁頁碼資訊和每頁條數 int pageNum = PageUtil.getTargetPage(request); int pageSize = PageUtil.getPageSize(request); Page page = new Page(pageSize, pageNum); // 查詢需要展示的內容 List<UserMoney> list = vasMoneyService.getUserMoneyList(page,searchParams); model.addAttribute("data"
, list); model.addAttribute("page", page); // 將搜尋條件編碼成字串,用於排序,分頁的URL model.addAttribute("searchParams", PageUtil.encodeParameterStringWithPrefix(searchParams, "search_")); return "vasadmin/user_money_list"; }

Service層程式碼:

public List<UserMoney> getUserMoneyList(Page page,
        Map<String, 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);

    // 查詢總條數
    int totleElements = vasMoneyDao.getUserMoneyListCount(
            DataBaseName.DB_TATA_MONEY, userId, minMoney, maxMoney);
    // 設定總條數
    page.setTotleElements(totleElements);

    // 查詢需要展示的資料
    return vasMoneyDao.getUserMoneyList(DataBaseName.DB_TATA_MONEY, userId,
            minMoney, maxMoney, page.getStartNum(), page.getEndNum());
}

每次需要分頁,只需要操作上邊這兩步,是不是很簡單啊~~。接下來,給大家貼出封裝的pagination.jsp程式碼,和其它的一些幫助類的程式碼。

3. 程式碼示例

pagination.jsp (封裝的通用分頁程式碼)

<%@ 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" %>

<!-- 分頁資訊 -->
<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=1&pageSize=10&${searchParams}"
                <c:if test="${page.pageSize eq '10' }">selected</c:if>>10</option>
            <option value="?pageNum=1&pageSize=50&${searchParams}"
                <c:if test="${page.pageSize eq '50' }">selected</c:if>>50</option>
            <option value="?pageNum=1&pageSize=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} 頁,${page.totleElements}
                    條</a></li>
            <c:if test="${page.hasPrevious == false}">
                <li class="disabled"><a href="#">首頁</a></li>
                <li class="disabled"><a href="#">上一頁</a></li>
            </c:if>
            <c:if test="${page.hasPrevious == true}">
                <li><a
                    href="?pageNum=1&pageSize=${page.pageSize}&${searchParams}">首頁</a></li>
                <li><a
                    href="?pageNum=${page.prePage}&pageSize=${page.pageSize}&${searchParams}">上一頁</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}">${i}</a></li>
                    </c:when>
                    <c:otherwise>
                        <li><a
                            href="?pageNum=${i}&pageSize=${page.pageSize}&${searchParams}">${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}">下一頁</a></li>
                <li><a
                    href="?pageNum=${page.totlePages}&pageSize=${page.pageSize}&${searchParams}">末頁</a></li>
            </c:if>
            <c:if test="${page.hasNext == false}">
                <li class="disabled"><a href="#">下一頁</a></li>
                <li class="disabled"><a href="#">末頁</a></li>
            </c:if>

        </ul>

    </div>
</div>
<!-- 分頁資訊結束 -->

Page.java (分頁資訊類)

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;
        }
    }

    /**
     * 初始化各個值
     */
    public void initValue(){
        // 計算總共有多少頁
        totlePages = (int)Math.ceil(totleElements * 1.0 / pageSize);

        if(totlePages == 0){
            totlePages = 1;
        }

        // 頁碼矯正
        if(pageNum <= 0){
            pageNum = 1;
        }
        if(pageNum > totlePages){
            pageNum = totlePages;
        }

        // 是否有上一頁和首頁
        if(pageNum > 1){
            hasPrevious = true;
            prePage = pageNum - 1;
        }

        // 是否有下一頁和尾頁
        if(totlePages > pageNum){
            hasNext = true;
            nextPage = pageNum + 1;
        }

        // 分頁頁碼開始數值
        begin = Math.max(1, pageNum - paginationSize/2);

        // 分頁頁碼結束數值
        end = Math.min(begin + (paginationSize - 1), totlePages);
    }

    /**
     * 分頁下標最多顯示多少頁
     */
    private int paginationSize = 10;
    /**
     * 頁碼開始
     */
    private int begin = 1;
    /**
     * 頁碼結束
     */
    private int end = 1;
    /**
     * 每頁顯示多少條
     */
    private int pageSize = 15;
    /**
     * 當前頁碼
     */
    private int pageNum = 1;
    /**
     * 是否有下一頁
     */
    private boolean hasNext = false;
    /**
     * 是否有上一頁
     */
    private boolean hasPrevious = false;
    /**
     * 下一頁的頁碼
     */
    private int nextPage;
    /**
     * 上一頁的頁碼
     */
    private int prePage;
    /**
     * 總頁數
     */
    private int totlePages = 1;
    /**
     * 總條數
     */
    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;
        // 知道總條數之後,初始化一下其它值
        initValue();
    }

    public static void main(String[] args) {
        System.out.println(Math.min(1, 2));
    }

    /**
     * 從第幾條開始查詢
     * @return
     */
    public int getStartNum(){
        return (pageNum -1) * pageSize + 1;
    }

    /**
     * 到第幾條結束
     * @return
     */
    public int getEndNum(){
        return pageNum * pageSize;
    }
}

PageUtil.java (分頁輔助類)

public class PageUtil implements Serializable {

    private static final long serialVersionUID = 1L;

    /**
     * 獲取目標頁碼
     * @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;
    }

    /**
     * 獲取每頁條數
     * @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 每個引數的字首
     * @return
     */
    public static String encodeParameterStringWithPrefix(Map<String,Object> map, String prefix){

        if(null == map || map.isEmpty()){
            return "";
        }

        StringBuffer sb = new StringBuffer();

        Iterator<Map.Entry<String,Object>> entries = map.entrySet().iterator();

        while (entries.hasNext()) {

            if(StringUtils.isNotEmpty(sb.toString())){
                sb.append("&");
            }

            Map.Entry<String,Object> entry = entries.next();

            sb.append(prefix);
            sb.append(entry.getKey());
            sb.append("=");
            sb.append(entry.getValue());

        } 

        return sb.toString();

    }

}

jsp頁面中查詢條件引數編寫示例如下:

<!-- 查詢條件 -->
<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>
<!-- /查詢條件 -->