Jquey+bootstrap打造简单的分页组件

最新推荐文章于 2022-11-13 10:27:47 发布

陪计算机走过漫长岁月

最新推荐文章于 2022-11-13 10:27:47 发布

阅读量564

点赞数 1

分类专栏：前端

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

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

博主最近都在写前端，总监来了一个将数据分页显示的需求，我想了想，反正这东西后面也要用到，不如把它弄成一个组件，封装起来，那以后岂不是美滋滋？？

好了，废话不多说，直接上代码了….

html代码：
（其实HTML部分的代码平平无奇，只是将bootstrap和jquery引进来…..）

<body>
        <div id="page">
            <!--在这里放一个page的盒子，里面的内容由js添加-->
        </div>
    </body>

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代码：


//定义全局对象page，对象中有两个属性，一个当前页码数，一个总页数
var page = {pageno:1,totalPage:0}

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

    //添加按钮
    addButtons(page.totalPage);
    //禁用"上一页"按钮，因为默认是第一页，第一页没有上一页
    isDisabled(page.pageno,page.totalPage);

    //绑定“上一页”按钮的点击事件
    $(document).on("click","#page .prev",function(){
        page.pageno =  parseInt(page.pageno) - 1 ;
        console.info(page.pageno)
        $("#page .page-btn").removeClass("curr-page").eq(page.pageno-1 ).addClass("curr-page");
        isDisabled(page.pageno,page.totalPage);
    })

    //绑定“下一页”按钮点击事件
    $(document).on("click","#page .next",function(){
        page.pageno =  parseInt(page.pageno) + 1 ;
        console.info(page.pageno);
        $("#page .page-btn").removeClass("curr-page").eq(page.pageno-1 ).addClass("curr-page");
        isDisabled(page.pageno,page.totalPage);
    })

    //绑定“页码”按钮的点击时间
    $(document).on("click",".page-btn",function(){
        $this = $(this);
        page.pageno = $this.text();
        $("#page .page-btn").removeClass("curr-page").eq(page.pageno-1 ).addClass("curr-page");
        isDisabled(page.pageno,page.totalPage);
    })
})

//添加分页插件，根据总页数来添加按钮
function addButtons(totalPage){
        var _html = "<center><button class='btn btn-default prev' ><<上一页</button> ";
        for(var i = 1 ; i <= totalPage ; i++){
                if( i == 1){
                   _html += "<button class='btn btn-default page-btn curr-page'>"+ i +"</button> ";
                 }else{
             _html += "<button class='btn btn-default page-btn'>"+ 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");
            }
}