js分页组件
js分页组件
驛路梨花醉美 发表于10个月前
js分页组件
  • 发表于 10个月前
  • 阅读 15
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

这是一个基于jquery 封装的表格分页组件, 是以前刚学web开发的时候在网上抄了一个(具体是哪位大神写的就忘了,不好意思哈),然后改改,有需要的可以参考一下,也是学jquery组件封装的一个小例子。(这里面的样式什么的都可以去掉,自定义)。

/**
 * @author JHT0701
 * Created by JHT0701 on 2016/3/14.
 */
(function($){
    var ms={
            init:function(obj,args){
                return (function(){
                    ms.fillHtml(obj,args);
                    ms.bindEvent(obj,args);
                })();
            },
            //fill html
            fillHtml:function(obj,args){
                return (function(){
                    obj.empty();
                    var pageStr='<div class="hidden-xs pull-left" style="margin-left: 12px"><div class="space-4"></div>总记录数:'
                        +args.totalCount+'条,每页'
                        +args.pageSize+'条,共'+args.pageCount+'页。</div><ul class="pagination pull-left">';

                    /*obj.append('<div id="my_pager">');
                    obj.append('<ul class="paginList">');*/
                    //prev page
                    if(args.current>1){
                        obj.append('<li class=""><a href="javascript:;" class="prevPage">上一页</a></li>');
                        pageStr+='<li class=""><a href="javascript:;" class="firstPage">首页</a></li><li class=""><a href="javascript:;" class="prevPage">上一页</a></li>';
                    }else{
                        obj.remove('.prevPage');
                        pageStr.replace("prevPage","");
                        pageStr.replace("firstPage","");
                        obj.append('<li class=""><a style="color:darkgray" class="">上一页</a></li>');
                        pageStr+='<li class="disabled"><a style="color:darkgray" class="">首页</a></li><li class="disabled"><a style="color:darkgray" class="">上一页</a></li>';
                    }
                    //middle page
                    if(args.current!= 1 && args.current>=4 && args.pageCount!=4){
                        obj.append('<li class=""><a href="javascript:;" class="tcdNumber">'+1+'</a></li>');
                        pageStr+='<li class=""><a href="javascript:;" class="tcdNumber">'+1+'</a></li>';
                    }
                    if(args.current-2 > 2 && args.current<=args.pageCount && args.pageCount>5){
                        obj.append('<li class=""><a>...</a></li>');
                        pageStr+='<li class=""><a>...</a></li>';
                    }
                    var start=args.current - 2;
                    var end=args.current + 2;
                    if((start>1 && args.current<4)||args.current==1){
                        end++;
                    }
                    if(args.current>args.pageCount-4 && args.current>=args.pageCount){
                        start--;
                    }
                    for(;start<=end;start++){
                        if(start<=args.pageCount && start >=1){
                            if(start != args.current){
                                obj.append('<li class=""><a href="javascript:;" class="tcdNumber">'+start+'</a></li>');
                                pageStr+='<li class=""><a href="javascript:;" class="tcdNumber">'+start+'</a></li>';
                            }else{
                                obj.append('<li class="active"><a class="acurrent" >'+start+'</a></li>');
                                pageStr+='<li class="active"><a class="acurrent" >'+start+'</a></li>';
                            }
                        }
                    }
                    if(args.current + 2 <args.pageCount -1 && args.current>=1 && args.pageCount>5){
                        obj.append('<li class=""><a class="min-width-75 align-center">...</a></li>');
                        pageStr+='<li class=""><a class="min-width-75 align-center">...</a></li>';
                    }
                    if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){
                        obj.append('<li class=""><a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a></li>');
                        pageStr+='<li class=""><a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a></li>';
                    }
                    //next page
                    if(args.current < args.pageCount){
                        obj.append('<li class=""><a href="javascript:;" class="nextPage">下一页</a></li>');
                        pageStr+='<li class=""><a href="javascript:;" class="nextPage">下一页</a></li><li class=""><a href="javascript:;" class="lastPage">尾页</a></li></ul>';
                    }else{
                        obj.remove('.nextPage');
                        pageStr.replace("nextPage","");
                        obj.append('<li class=""><a style="color:darkgray" class="">下一页</a></li>');
                        pageStr+='<li class="disabled"><a style="color:darkgray" class="">下一页</a></li><li class="disabled"><a style="color:darkgray" class="">尾页</a></li></ul>';
                    }

                    /*obj.append('</ul');
                    obj.append('</div>');*/
                    obj.empty();
                    obj.append(pageStr);


                })();
            },
            bindEvent:function(obj,args){
                return (function(){
                    obj.off("click","a.tcdNumber").on("click","a.tcdNumber",function(){
                        var current = parseInt($(this).text());
                        ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount,"pageSize":args.pageSize,"totalCount":args.totalCount});
                        if(typeof(args.backFunc)=="function"){
                            args.backFunc(current);
                        }
                    });
                    //firstpage click event
                    obj.off("click","a.firstPage").on("click","a.firstPage",function(){
                        //var current = parseInt(obj.children("li").children("a.acurrent").text());
                        //alert(current);
                        ms.fillHtml(obj,{"current":1,"pageCount":args.pageCount,"pageSize":args.pageSize,"totalCount":args.totalCount});
                        if(typeof(args.backFunc)=="function"){
                            args.backFunc(1);
                        }
                    });
                    //firstpage click event
                    obj.off("click","a.lastPage").on("click","a.lastPage",function(){
                        ms.fillHtml(obj,{"current":args.pageCount,"pageCount":args.pageCount,"pageSize":args.pageSize,"totalCount":args.totalCount});
                        if(typeof(args.backFunc)=="function"){
                            args.backFunc(args.pageCount);
                        }
                    });
                    //prevpage click event
                    obj.off("click","a.prevPage").on("click","a.prevPage",function(){
                        //var current = parseInt(obj.children("li").children("a.acurrent").text());
                        var current=args.current;
                        //alert(current);
                        ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount,"pageSize":args.pageSize,"totalCount":args.totalCount});
                        if(typeof(args.backFunc)=="function"){
                            args.backFunc(current-1);
                        }
                    });
                    //nextpage click event
                    obj.off("click","a.nextPage").on("click","a.nextPage",function(){
                        //var current = parseInt(obj.children("li").children("a.acurrent").text());
                        //alert(args.current);
                        var current=args.current;
                        //alert(current);
                        ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount,"pageSize":args.pageSize,"totalCount":args.totalCount});
                        if(typeof(args.backFunc)=="function"){
                            args.backFunc(current+1);
                        }
                    });
                })();
            }
        }
    $.fn.createPage=function(options){
        var args= $.extend({
            pageCount:0,//总页数
            current:1,//当前页
            pageSize:10,//每页条数
            totalCount:0,//总条数
            backFunc:function(){},
        },options);
        ms.init(this,args);
    };

})(jQuery);

使用:

$('#div_pager').createPage({
            pageCount:totalPage,
            current:pageNo,
            pageSize:pageSize,
            totalCount:totalCount,
            backFunc:function(p){
                //console.log(p);
          
            }
        });

效果图:

标签: jquery 分页
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 5
博文 142
码字总数 56393
×
驛路梨花醉美
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: