Jquery+boostrap打造分页组件升华版

最新推荐文章于 2022-05-31 15:01:14 发布

陪计算机走过漫长岁月

最新推荐文章于 2022-05-31 15:01:14 发布

阅读量414

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/LuciferMS/article/details/79189135

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在上一篇博客中，笔者做了一个简易的分页组件，这次做了一个逻辑比较全的..相对来说优化了一下…..下面我们来看代码..
html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/Jquery1.91.js" ></script>
        <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
        <script type="text/javascript" src="js/page.js" ></script>
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/page.css" />
    </head>
    <body>
        <div id="page">
            <!--在这里放一个page的盒子，里面的内容由js添加-->
        </div>
    </body>
</html>

css代码：

#page{
    margin-top: 100px;
}
#page .curr-page{
        background-color:#009d8e;
        color:white;
}
#page .page-btn:hover , #page .prev:hover, #page .next:hover{
        background-color:#009d8e;
        color:white;
}

js代码（核心）：


var page = {
    currPage:1, //当前页面，初始化为1
    totalPage:0,//总页面，通过计算获得
    pageLength:10,//按钮数量，可以自己把控
    startPage:1,//当前显示的第一个按钮的值
    endPage:10//当前显示的最后一个按钮的值
}

$(function(){
    //这里假设由异步返回了信息，然后我们计算出了页数
    page.totalPage = 17; //假设是17页

    //初始化按钮，即第一次网页面上添加按钮
    addButtons(page.startPage , page.pageLength);
    $("#page .page-btn").first().addClass("curr-page");
    //禁用"上一页"按钮，因为默认是第一页，第一页没有上一页
    isDisabled(page.currPage,page.totalPage);

    //绑定“上一页”按钮的点击事件
    $(document).on("click","#page .prev",function(){
        page.currPage =  parseInt(page.currPage) - 1 ;
        pageIteration(page.currPage);
        isDisabled(page.currPage,page.totalPage);
    })

    //绑定“下一页”按钮点击事件
    $(document).on("click","#page .next",function(){
        page.currPage =  parseInt(page.currPage) + 1 ;
        pageIteration(page.currPage);
        isDisabled(page.currPage,page.totalPage);
    })

    //绑定“页码”按钮的点击事件
    $(document).on("click",".page-btn",function(){
        $this = $(this);
        page.currPage = parseInt($this.text());
        pageIteration(page.currPage);
        isDisabled(page.currPage,page.totalPage);
    })
})

//添加分页插件，根据总页数来添加按钮
function addButtons(startPage,pageLength){
        $("#page").html(" ");
        var _html = "<center><button class='btn btn-default prev' ><<上一页</button> ";
        for(var i = startPage ; i < startPage + pageLength ; i++){
             _html += "<button class='btn btn-default page-btn' data-pageno="+i+">"+ i +"</button> ";
          }
        _html += " <button class='btn btn-default next'>下一页>></button></center>";
        $("#page").html(_html);
}

//分页按钮迭代(最要是对"上一页"和”下一页“是否禁用的判断)
function  isDisabled(pagenum,totalpage){
            if(totalpage ==0 || totalpage ==1){
                   $("#page .prev").attr("disabled",true);
                   $("#page .next").attr("disabled",true);
            }else if(pagenum ==1){
                   $("#page .prev").attr("disabled",true);
                   $("#page .next").removeAttr("disabled");
            }else if(pagenum == totalpage){
                 $("#page .next").attr("disabled",true);
                 $("#page .prev").removeAttr("disabled");
            }else{
                 $("#page .next").removeAttr("disabled");
                 $("#page .prev").removeAttr("disabled");
            }
}

//按钮迭代器
function pageIteration(currPage){
    if(page.currPage != 1 && page.currPage == page.startPage ){
            page.startPage = page.currPage - page.pageLength/2 ;
            page.endPage = page.currPage + page.pageLength/2 -1;
            addButtons(page.startPage , page.pageLength);
            $("#page .page-btn").eq(page.pageLength/2).addClass("curr-page");
        }else if(page.currPage != page.totalPage && page.currPage == page.endPage){
            page.startPage = page.currPage - page.pageLength/2  + 1;
            page.endPage = (page.currPage + page.pageLength/2) >= page.totalPage ?  page.totalPage : (page.currPage + page.pageLength/2);
            addButtons(page.startPage , page.pageLength /2 + (page.endPage == page.totalPage ? (page.endPage - page.currPage) : page.pageLength/2));
            $("#page .page-btn").eq(page.pageLength/2 -1).addClass("curr-page");
        }
        $("#page .page-btn").removeClass("curr-page").parent().find("[data-pageno="+currPage+"]").addClass("curr-page");
        //console.info(page); 看官可以把此时的page对象输出来看一看...
}

效果：

陪计算机走过漫长岁月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery+boostrap打造分页组件升华版

在上一篇博客中，笔者做了一个简易的分页组件，这次做了一个逻辑比较全的..相对来说优化了一下…..下面我们来看代码.. html代码：html> head> meta charset="utf-8" /> title>title> script type="text/javascript" src="js/Jquery1.91.js"
复制链接

扫一扫