分页方法

最新推荐文章于 2022-10-18 17:46:10 发布
最新推荐文章于 2022-10-18 17:46:10 发布
阅读量226 收藏
点赞数
分类专栏： Js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boenwan/article/details/81114626
版权
java 同时被 2 个专栏收录
29 篇文章 0 订阅
订阅专栏
Js
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();
    }

最终呈现的效果这里写图片描述

伯恩dadi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
8种MySQL分页方法总结
12-15
网上看到网上推荐了一些分页方法，但似乎不太可行，你能点评一下吗？ 方法1: 直接使用数据库提供的SQL语句 —语句样式: MySQL中,可用如下方法: SELECT * FROM 表名称 LIMIT M,N。 —适应场景: 适用于数据量较少的...
三种SQL分页法
逝去的41WDfWQ%5mW60F
05-04 1825
三种SQL分页法    表中主键必须为标识列，[ID] int IDENTITY (1,1)  1.分页方案一：(利用Not In和SELECT TOP分页)语句形式：   SELECT TOP 10 *FROM TestTableWHERE (ID NOT IN          (SELECT TOP 20 id         FROM TestTable         ORDER BY
分页的几种方法
CSSANDWPJ的博客
05-24 2146
1：Top分页法         缺点：数据量越大效率越慢 2：between 1 and 5         Id不连续是有问题的 3: rownumber函数分页         查询行号,      sql包裹:把一次查询的结果，作用另外一次查询的表 4:内存分页          一次查询全表，放入内存，分页直接请求内存    效率非常快，缓存         缺点：
经典好用的list分页方法
Daniel
10-18 6435
通用 list 分页方法
数组分页方法
刘庆付的博客
11-16 1410
/** * 数组分页 * @param string $page * @param string $limit * @return array */ public function array_page($data,$page='1',$limit='10'){ //数组总数/每页个数=总页数 $countP
mongodb分页方法
没得简介
02-11 4827
分页方法cursor.limit(<number>): 取多少个文档cursor.s
手写分页方法
a984171281的博客
02-11 1325
分页方法 前端传过来的pageSize、currentPage calculatePageCount()是计算分页的方法 public class PageInfo implements Serializable { public static final int DEFAULT_PAGE_SIZE = 20; private int rowCount = 0; //当前页数 private int currentPage = 1; //页面大小 默认20条一页 private int
golang 的一个分页方法
我的博客
03-14 6381
需要做一分页。。就做了个方法，beego里的例子太麻烦了。还是弄个简单的吧，上代码。。 //分页方法，根据传递过来的页数，每页数，总数，返回分页的内容 7个页数 前 1，2，3，4，5 后 的格式返回,小于5页返回具体页数 func Paginator(page, prepage int, nums int64) map[string]interface{} { var firs...
Oracle 分页方法研究
小麦苗DBA宝典
08-04 3264
Oracle 分页方法研究 1、Oracle 中的三大分页方法 1.1、通过分析函数分页 ...
PHP+JQuery+Ajax实现分页方法详解
12-19
本文实例讲述了PHP+JQuery+Ajax实现分页的方法。分享给大家供大家参考，具体如下： 为了锻炼下jQuery，决定自己动手写写分页 最终的效果如图： 点击某个字母后，下方显示以该字母为首字母的所有词语； 分页显示，每...
asp分页方法
12-23
asp的七种分页方法！ 简单 实用 是有点乱 ASP中七种实现分页显示的方法 MS Visual InterDev6.0中七种实现分页显示的方法 我们在编制与数据库有关的Web网页时，由于要显示的数据量巨大，常常面临一个数据记录分页...
SQL SERVER 2008 中三种分页方法与比较
09-10
SQL SERVER 2008 中三种分页方法与比较，需要的朋友可以参考一下
数据库分页方法
12-30
数据库分页方法，一个数据库分页的语句，非常方便
php实现的漂亮分页方法
10-26
主要介绍了php实现的漂亮分页方法,代码很简单，需要的朋友可以参考下
Sql Server 2012 分页方法分析(offset and fetch)
09-11
最近在分析 Sql Server 2012 中 offset and fetch 的新特性，发现 offset and fetch 无论语法的简洁还是功能的强大，都是相当相当不错的
高效的mysql分页方法及原理
09-10
介绍了高效的mysql分页方法及原理，有需要的朋友可以参考一下
MySQL分页技术、6种分页方法总结
12-15
网上看到赶集网XX推荐了一些分页方法,但似乎不太可行，你能点评一下吗？ 方法总结 方法1: 直接使用数据库提供的SQL语句 语句样式: MySQL中,可用如下方法: SELECT * FROM 表名称 LIMIT M,N 适应场景: 适用于数据量较...
mybatis分页方法
最新发布
08-30
根据引用中的博客文章《MyBatis配置文件详解》，你可以在配置文件中添加相应的插件配置，并在需要分页的查询语句中使用插件提供的分页方法，即可实现数据的分页查询。 2. RowBounds参数方法：另一种实现分页的方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值