分页方法

最新推荐文章于 2022-10-18 17:46:10 发布

伯恩dadi

最新推荐文章于 2022-10-18 17:46:10 发布

阅读量246

点赞数

分类专栏： Js java

本文链接：https://blog.csdn.net/boenwan/article/details/81114626

版权

java 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

js方式：

/**
 * 分页方法
 * @param pageNo 当前页
 * @param pageSize 每页显示条数
 * @param pageTotal 总页码
 * @param count 总条数
 * @param length 显示页面长度
 * @param slider 前后显示页面长度
 * @param toPageFuc 分页方法 默认为toPage方法
 * @param cPage 跳转input域Id名 默认为cPage
 * @returns
 */
var show_page_input = true;
function yx_page(pageNo, pageSize, pageTotal,count, length, slider,toPageFuc,cPage){
    if(!count||!/^([1-9]\d*)?$/.test(count)){
        return "";
    }
    if(toPageFuc==undefined||!toPageFuc){
            toPageFuc="toPage";
    }
    if(cPage==undefined||!cPage){
        cPage="cPage";
    }
    var first =1;
    var sb = $('<ul class="pagination"></ul> '); 
    sb.append('<li><span>共有'+count+'条，每页显示：'+pageSize+'条</span></li>');

    if (pageNo == first) {// 如果是首页
        sb.append('<li class="disabled"> <a aria-label="Previous" href="#"> <span aria-hidden="true">«</span> </a> </li>');
    } else {
        var prev = pageNo-1;
        sb.append('<li> <a aria-label="Previous" href="javascript:'+toPageFuc+'('+prev+','+pageTotal+');"> <span aria-hidden="true">«</span> </a> </li>');
    }

    var begin = pageNo - (length / 2);

    if (begin < first) {
        begin = first;
    }

    var end = begin + length - 1;
    if (end >= pageTotal) {
        end = pageTotal;
        begin = end - length + 1;
        if (begin < first) {
            begin = first;
        }
    }
    if (begin > first) {
        var i = 0;
        for (i = first; i < first + slider && i < begin; i++) {
            sb.append("<li><a href='javascript:"+toPageFuc+"("+i+","+pageTotal+");'>"
                    + (i + 1 - first) + "</a></li>\n");
        }
        if (i < begin) {
            sb.append("<li class=\"disabled\"><a href='javascript:'>...</a></li>\n");
        }
    }
    for (var i = begin; i <= end; i++) {
        if (i == pageNo) {
            sb.append("<li class=\"active\"><a href='javascript:'>" + (i + 1 - first)
                    + "</a></li>\n");
        } else {
            sb.append("<li><a href='javascript:"+toPageFuc+"("+i+","+pageTotal+");'>"
                    + (i + 1 - first) + "</a></li>\n");
        }
    }

    if (pageTotal - end > slider) {
        sb.append("<li class=\"disabled\"><a href='javascript:'>...</a></li>\n");
        end = pageTotal - slider;
    }

    for (var i = end + 1; i <= pageTotal; i++) {
        sb.append("<li><a href='javascript:"+toPageFuc+"("+i+","+pageTotal+");'>"
                + (i + 1 - first) + "</a></li>\n");
    }

    if (pageNo == pageTotal) {
        sb.append('<li class=\"disabled\"> <a aria-label="Next" href="javascript:"> <span aria-hidden="true">»</span> </a> </li>');
    } else {
        var next = pageNo+1;
        sb.append('<li> <a aria-label="Next" href="javascript:'+toPageFuc+'('+next+','+pageTotal+');"> <span aria-hidden="true">»</span> </a> </li>');
    }
    if(show_page_input){
        sb.append('<li class="ml-10 mr-10"><input type="text" class="form-control" id="'+cPage+'" value='+pageNo+' onchange="checkNum(this)&&checkPage(this,'+pageTotal+')" onkeyup="textValid(this,'+pageNo+')"></li>');
        sb.append('<li><a href="javascript:'+toPageFuc+'($(\'#'+cPage+'\').val(),'+pageTotal+')">GO</a></li>');
    }

    sb.append("<div style=\"clear:both;\"></div>");
    var $div = $("<div></div>");
    $div.append(sb);
    return $div.html();
}
 function textValid(text,pno){
        var page = text.value;
        var reg = /^[1-9]*[1-9][0-9]*$/;
        if(reg.test(page)){
            return true;
        }else{
            text.value = pno;
            return false;
        }
    }
template.helper('yx_page', yx_page);

方法调用
需要template.min.js进行渲染

<script>
    <%=yx_page(pageNumber, pageSize,totalPage, totalRow, 4, 1)%>
</script>

jsp方式：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>
#pager{
    clear:both;
    height:30px;
    line-height:30px;
    margin-top:20px;
    color:#fff;
    font-size:14px;

}
#pager a{
    padding:2px 10px;
    margin:10px 3px;
    border:1px solid #ddd;
    background-color:#f3f3f3;
    color:#666;
    text-decoration:none;
}
#pager span{
    font-size:14px;
}
#pager span.disabled{
    padding:2px 10px;
    margin:10px 3px;

    border:1px solid #DFDFDF;
    background-color:#F8F8F8;
    color:#bbb;
}
#pager span.curr{
    padding:2px 10px;
    margin:10px 3px;

    border:1px solid #FF6600;
    background-color:#FF6600;
    color:#FFF;
}
#pager a:hover{
    background-color:#FF6600; /*#FFEEE5*/
    border:1px solid #FF6600;
    color:#fff;
}
#pager span.normalsize{ padding-left:8px;
    color:#777

}
#pager_gopage_wrap{
    display:inline-block;
    width:40px;
    height:32px;
    border:1px solid #DFDFDF;
    margin:0px 3px;
    padding:0px;
    position:relative;
    left:0px;
    top:9px;
}
#pager_btn_go {
    width:40px;
    height:20px;
    line-height:20px;
    padding:0px;
    font-family:arial,ËÎÌå,sans-serif;
    text-align:center;
    border:0px;
    background-color:#428bca;
    color:#FFF;
    position:absolute;
    left:0px;
    top:5px;
    display:none;
}
#pager_btn_go_input{
    width:38px;
    height:30px;
    text-align:center;
    border:0px;
    position:absolute;
    left:0px;
    top:0px;
    outline:none;
    color:#666;
}
</style>
<c:set var="length" value="4"></c:set>
<c:set var="slider" value="1"></c:set>
<c:if test="${ not empty pagebean && fn:length(pagebean.queryList)>0 }">
<div id="pager" style="text-align:center">&nbsp;
   <c:if test="${pagebean.currentPage==1}">
        <span class="disabled">上一页</span>
   </c:if>
   <c:if test="${pagebean.currentPage!=1}">
        <a href='javascript:void(0)' onclick="page('${pagebean.beforePage}')"><span>上一页</span></a>
   </c:if>
   <c:set var="begin" value="${pagebean.currentPage-(length / 2) }"></c:set> 
   <c:if test="${begin <1 }">
        <c:set var="begin" value="1"></c:set>
   </c:if>
   <c:set var="end" value="${begin + length - 1}"></c:set>
   <c:if test="${end>=pagebean.totalPages}">
        <c:set var="end" value="${pagebean.totalPages}"></c:set>
        <c:set var="begin" value="${end - length + 1 }"></c:set>
        <c:if test="${begin <1 }">
            <c:set var="begin" value="1"></c:set>
        </c:if>
   </c:if>
   <c:if test="${begin >1 }">
        <c:set var="step" value="0"></c:set>
        <c:forEach begin="1" end="1" varStatus="index" var="t">
            <c:set var="i" value="${index.index }"></c:set>
            <a href='javascript:void(0)' onclick="page('${i}')"><span>${i}</span></a>
        </c:forEach> 
        <c:if test="${step <begin }">
            <span class="disabled">...</span>
        </c:if>
    </c:if>
   <c:forEach begin="${begin }" end="${end}" varStatus="index" var="t">
        <c:if test="${(index.index) ==pagebean.currentPage }">
            <span class="curr">${index.index}</span>
        </c:if>
        <c:if test="${index.index !=pagebean.currentPage }">
            <a href='javascript:void(0)' onclick="page('${index.index}')"><span>${index.index}</span></a>
        </c:if>
   </c:forEach>
   <c:if test="${pagebean.totalPages-end> slider }">
        <span class="disabled">...</span>
        <c:set var="end" value="${pagebean.totalPages - slider}"></c:set>
   </c:if>
   <c:forEach begin="${end+1}" end="${pagebean.totalPages}" varStatus="index" var="t">
        <a href='javascript:void(0)' onclick="page('${index.index}')"><span>${index.index}</span></a>
   </c:forEach>
   <c:if test="${pagebean.currentPage == pagebean.totalPages}">
        <span class="disabled">下一页</span>
   </c:if>
   <c:if test="${pagebean.currentPage != pagebean.totalPages}">
        <a href='javascript:void(0)' onclick="page('${pagebean.afterPage}')"><span>下一页</span></a>  
   </c:if>  
   <span class="normalsize">共${pagebean.totalPages}页&nbsp;/&nbsp;${pagebean.totalRows}条数据</span>&nbsp;
   <span style="color:#777">转到</span>
   <span id="pager_gopage_wrap">
        <input type="button" id="pager_btn_go"  value="确定"  onclick="gotoPage('pager_btn_go_input','${pagebean.totalPages}')" >
        <input type="text" id="pager_btn_go_input"    value="${pagebean.currentPage}"  onfocus="focus_gopage()" onblur="blur_gopage()" hidefocus="true" onkeyup="textValid(this,'${pagebean.currentPage}')">
   </span>
   <span style="color:#777">页</span>
</div>
</c:if>
<script type="text/javascript">
//跳转框得到输入焦点时
 function focus_gopage (){
    var btnGo = $('#pager_btn_go');
    $('#pager_btn_go').attr('hideFocus',true);
    btnGo.show();
    btnGo.css('left','0px');
    $('#pager_btn_go').css('border-color','#6694E3');
    btnGo.animate({left: '+=44'}, 50,function(){
        $('#'+this.gopageWrapId).css('width','88px');
    });
}

//跳转框失去输入焦点时
function blur_gopage(){
    var _this = this;
    setTimeout(function(){
        var btnGo = $('#pager_btn_go');
        btnGo.animate({
            left: '-=44'
          }, 100, function(){
              btnGo.css('left','0px');
              btnGo.hide();
              $('#pager_btn_go').css('border-color','#DFDFDF');
          });
    },400);
}

function textValid(text,pno){
    var page = text.value;
    var reg = /^[1-9]*[1-9][0-9]*$/;
    if(reg.test(page)){
        return true;
    }else{
        text.value = pno;
        return false;
    }
}
</script>

java 方式：

/**
     * 默认输出当前分页标签 
     * <div class="page">${page}</div>
     */
    @Override
    public String toString() {

        StringBuilder sb = new StringBuilder();

        if (pageNo == first) {// 如果是首页
            sb.append("<li class=\"disabled\"><a href=\"javascript:\">&#171; 上一页</a></li>\n");
        } else {
            sb.append("<li><a href=\"javascript:\" onclick=\""+funcName+"("+prev+","+pageSize+",'"+funcParam+"');\">&#171; 上一页</a></li>\n");
        }

        int begin = pageNo - (length / 2);

        if (begin < first) {
            begin = first;
        }

        int end = begin + length - 1;

        if (end >= last) {
            end = last;
            begin = end - length + 1;
            if (begin < first) {
                begin = first;
            }
        }

        if (begin > first) {
            int i = 0;
            for (i = first; i < first + slider && i < begin; i++) {
                sb.append("<li><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">"
                        + (i + 1 - first) + "</a></li>\n");
            }
            if (i < begin) {
                sb.append("<li class=\"disabled\"><a href=\"javascript:\">...</a></li>\n");
            }
        }

        for (int i = begin; i <= end; i++) {
            if (i == pageNo) {
                sb.append("<li class=\"active\"><a href=\"javascript:\">" + (i + 1 - first)
                        + "</a></li>\n");
            } else {
                sb.append("<li><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">"
                        + (i + 1 - first) + "</a></li>\n");
            }
        }

        if (last - end > slider) {
            sb.append("<li class=\"disabled\"><a href=\"javascript:\">...</a></li>\n");
            end = last - slider;
        }

        for (int i = end + 1; i <= last; i++) {
            sb.append("<li><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">"
                    + (i + 1 - first) + "</a></li>\n");
        }

        if (pageNo == last) {
            sb.append("<li class=\"disabled\"><a href=\"javascript:\">下一页 &#187;</a></li>\n");
        } else {
            sb.append("<li><a href=\"javascript:\" onclick=\""+funcName+"("+next+","+pageSize+",'"+funcParam+"');\">"
                    + "下一页 &#187;</a></li>\n");
        }

        sb.append("<li class=\"disabled controls\"><a href=\"javascript:\">当前 ");
        sb.append("<input type=\"text\" value=\""+pageNo+"\" onkeypress=\"var e=window.event||event;var c=e.keyCode||e.which;if(c==13)");
        sb.append(funcName+"(this.value,"+pageSize+",'"+funcParam+"');\" onclick=\"this.select();\"/> / ");
        sb.append("<input type=\"text\" value=\""+pageSize+"\" onkeypress=\"var e=window.event||event;var c=e.keyCode||e.which;if(c==13)");
        sb.append(funcName+"("+pageNo+",this.value,'"+funcParam+"');\" onclick=\"this.select();\"/> 条，");
        sb.append("共 " + count + " 条"+(message!=null?message:"")+"</a></li>\n");

        sb.insert(0,"<ul>\n").append("</ul>\n");

        sb.append("<div style=\"clear:both;\"></div>");

//      sb.insert(0,"<div class=\"page\">\n").append("</div>\n");

        return sb.toString();
    }