自定義 jsp 分頁控件

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="path" value="${path}"></c:set>
<%-- 總條數 --%>
<c:set var="total" value="${total}"></c:set>
<%-- 總頁數 --%>
<c:set var="pageCount" value=""></c:set>
<%-- 當前頁索引 --%>
<c:set var="pageIndex" value="${pageIndex}"></c:set>
<%-- 每頁顯示條數 --%>
<c:set var="pageSize" value="${pageSize}"></c:set>

<c:set var="borderColor" value=""></c:set>
<c:set var="backColor" value=""></c:set>
<c:set var="selectColor" value=""></c:set>

<%-- 根據總條數計算總頁數
--%>
<c:set var="beginSize" value="1"></c:set>
<c:set var="endSize" value=""></c:set>
<c:if test="${ total%pageSize==0}">
    <c:set var="endSize" value="${total/pageSize}"></c:set>
    <c:set var="pageCount" value="${total/pageSize}"></c:set>
</c:if>
<c:if test="${ total%pageSize >0}">
    <c:set var="endSize" value="${(total-total%pageSize)/pageSize+1}"></c:set>
    <c:set var="pageCount" value="${(total-total%pageSize)/pageSize+1}"></c:set>
</c:if>
<%--
    endSize:<c:out value="${pageCount}"></c:out>
--%>
<!------------------------javascript begin-------------------------->
<script type="text/javascript">
function getCheck(path){
    if(path.indexOf('?')==-1){
        return path+"?";
    }else{
        return path+"&";
    }
}
function getPageSize(){
    var pgSizeObj = document.getElementById("selPageSize");
    var pageVal = pgSizeObj.value;
    //alert(pageVal);
    return pageVal;
}

function changePageSize(obj){
    var pageVal = obj.value;
    //alert(pageVal);
    var path = getCheck("${path}")+"pageSize="+pageVal+"&pageIndex="+1;
    // forwrard
    //alert(path);
    location.href=path;
}
function changePageIndex(obj){
    var pageIndex = obj.value;
    //alert(pageVal);
    var path = getCheck("${path}")+"pageSize="+getPageSize()+"&pageIndex="+pageIndex;
    // forwrard
    //alert(path);
    location.href=path;
}
function goFirstPage(){
    var path = getCheck("${path}")+"pageSize="+getPageSize()+"&pageIndex="+"${beginSize}";
    //alert(path);
    location.href=path;
}
function goLastPage(){
    var path = getCheck("${path}")+"pageSize="+getPageSize()+"&pageIndex="+parseInt("${endSize}");
    //alert(path);
    location.href=path;
}
function goPreviousPage(){
    var nowPageIndex = parseInt("${pageIndex}");
    var endPageIndex = parseInt("${endSize}");
   
    //alert("now:"+nowPageIndex+" \n"+"end: "+endPageIndex);
    var pageIndex;
    if(nowPageIndex <= 1){
        pageIndex=1;
    }else if(nowPageIndex>1 || nowPageIndex<=endPageIndex){
        pageIndex=nowPageIndex-1;
    }else{
        alert("出錯了");
    }
    var path = getCheck("${path}")+"pageSize="+getPageSize()+"&pageIndex="+pageIndex;
    //alert(path);
    location.href=path;
}
function goNextPage(){
    var nowPageIndex = parseInt("${pageIndex}");
    var endPageIndex = parseInt("${endSize}");

    //alert("now:"+nowPageIndex+" \n"+"end: "+endPageIndex);
    var pageIndex;
    if(nowPageIndex >= endPageIndex){
        pageIndex = endPageIndex;
    }else if(nowPageIndex < endPageIndex){
        pageIndex = nowPageIndex + 1;
    }else{
        alert("出錯了");
    }
    var path = getCheck("${path}")+"pageSize="+getPageSize()+"&pageIndex="+ pageIndex;
    //alert(path);
    location.href=path;
}
</script>

<!--------------------------javascript end------------------------>
<c:if test="${null!=path}">
<div id="main" style="border:0px solid blue; text-align:right; padding:3px; font-size: 12px;">
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>第${pageIndex}頁</td>
        <td>共<fmt:formatNumber value='${pageCount}' pattern='#'></fmt:formatNumber>頁</td>
        <c:if test="${pageIndex!=beginSize}">
            <td><input id="first" type="button" value="第一頁" onclick="goFirstPage()"></td>
        </c:if>
        <c:if test="${pageIndex != beginSize}">
            <td><input id="previous" type="button" value="上一頁" onclick="goPreviousPage()"></td>
        </c:if>
        <c:if test="${pageIndex != endSize}">
            <td><input id="next" type="button" value="下一頁" onclick="goNextPage()"></td>
        </c:if>
        <c:if test="${pageIndex != endSize}">
            <td><input id="last" type="button" value="最后一頁" onclick="goLastPage()"></td>
        </c:if>
        <%-- 共有多少頁 --%>
        <td>
            <select id="selPageIndex" onchange="changePageIndex(this)">
                <c:forEach var="indexValue" begin="1" end="${pageCount}" step="1">
                    <c:if test="${indexValue==pageIndex}">
                        <option value="${indexValue}" selected="selected">第${indexValue}頁</option>
                    </c:if>
                    <c:if test="${indexValue!=pageIndex}">
                        <option value="${indexValue}">第${indexValue}頁</option>
                    </c:if>
                </c:forEach>
            </select>
        </td>
        <%-- 每頁顯示多少條 --%>
        <td>
            <select id="selPageSize" onchange="changePageSize(this)">
                <c:forEach var="pageNum" begin="5" end="50" step="5">
                    <c:if test="${pageNum==pageSize}">
                        <option value="${pageNum}" selected="selected">每頁${pageNum}條</option>
                    </c:if>
                    <c:if test="${pageNum!=pageSize}">
                        <option value="${pageNum}">每頁${pageNum}條</option>
                    </c:if>
                </c:forEach>
            </select>
        </td>
    </tr>
</table>
</div>
</c:if>

评论

1 楼 风问起 2010-04-29