bootstrap 分页

最新推荐文章于 2023-10-31 10:39:32 发布

小纪萱苏

最新推荐文章于 2023-10-31 10:39:32 发布

阅读量361

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/xiaojixuansu/article/details/65961485

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

bootstrap分页

html代码

<html style="padding-bottom: 54px;">
    <title>jquery</title>
    <script type="text/javascript">
        $(function(){
            $(".pagination").createPage({
                totalPage:30,
                currPage:14,
                backFn:function(p){
                    console.log("回调函数："+p);
                }
            });
        })
</script>
</head>
<body>
    <div class="pagec" id="pagearea">
        <ul class="pagination">
        </ul>
    </div>
</body>
</html>

javascript代码：

(function($){
    var ms = {
        init:function(totalsubpageTmep,args){
            return (function(){
                ms.fillHtml(totalsubpageTmep,args);
                ms.bindEvent(totalsubpageTmep,args);
            })();
        },
        //填充html
        fillHtml:function(totalsubpageTmep,args){
            return (function(){
                totalsubpageTmep="";
                // 页码大于等于4的时候，添加第一个页码元素
                if(args.currPage!=1 && args.currPage>=4 && args.totalPage!=4) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+1+"</a></li>";
                }
                /* 当前页码>4, 并且<=总页码，总页码>5，添加“···”*/
                if(args.currPage-2>2 && args.currPage<=args.totalPage && args.totalPage>5) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
                }
                /* 当前页码的前两页 */
                var start = args.currPage-2;
                /* 当前页码的后两页 */
                var end = args.currPage+2;

                if((start>1 && args.currPage<4) || args.currPage==1) {
                    end++;
                }
                if(args.currPage>args.totalPage-4 && args.currPage>=args.totalPage) {
                    start--;
                }
                for(; start<=end; start++) {
                    if(start<=args.totalPage && start>=1) {
                        totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+start+"</a></li>";
                    }
                }
                if(args.currPage+2<args.totalPage-1 && args.currPage>=1 && args.totalPage>5) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
                }

                if(args.currPage!=args.totalPage && args.currPage<args.totalPage-2 && args.totalPage!=4) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+args.totalPage+"</a></li>";
                }
                $(".pagination").html(totalsubpageTmep);
            })();
        },
        //绑定事件
        bindEvent:function(totalsubpageTmep,args){
            return (function(){
                totalsubpageTmep.on("click","a.geraltTb_pager",function(event){
                    var current = parseInt($(this).text());
                    ms.fillHtml(totalsubpageTmep,{"currPage":current,"totalPage":args.totalPage,"turndown":args.turndown});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current);
                    }
                });
            })();
        }
    }
    $.fn.createPage = function(options){       
        ms.init(this,options);
    }
})(jQuery);

小纪萱苏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 分页

bootstrap分页html代码 jquery $(function(){ $(".pagination").createPage({ totalPage:30, currPage:14, backFn:function(p){
复制链接

扫一扫