bootstrap 分页

来源:互联网 发布:java for mac os x 编辑:程序博客网 时间:2024/05/16 17:41

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
原创粉丝点击