文档章节

js分页组件

驛路梨花醉美
 驛路梨花醉美
发布于 2017/04/21 18:27
字数 779
阅读 18
收藏 0

这是一个基于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);
          
            }
        });

效果图:

© 著作权归作者所有

共有 人打赏支持
驛路梨花醉美
粉丝 6
博文 162
码字总数 60589
作品 0
海淀
程序员
基于 jQuery 的 JavaScript 分页组件 - Pagination

Pagination 是一个基于 jQuery 实现的一个简单的 JavaScript 分页组件,主要实现以下功能: 1. 方便在 JavaScript 中对后端分页数据进行展示 2. 自动生成分页组件,包括首页、页码、末页、页...

勤劳的小木匠
07/19
0
0
bboss分页组件翻页js前置处理函数和js后置处理函数使用方法

bboss 3.7.7版本及后续版本为分页组件增加翻页js前置处理函数和翻页js后置处理函数,本文介绍使用方法。 1.说明: 为了实现这个功能,对/include下面的pager.js文件做了重构,将所有的分页处...

bboss
2014/01/16
0
0
Extjs gridPanl中本地数据分页

在EXtjs的gridPanl中store数据,分页的时候,一般是请求远程后台的数据,但是现在有需求,要对前台的本地数据进行分页 解决的办法(两种): 方法一:这里我们要用到一个插件: Ext.ux.data....

EDIAGD
2013/09/14
0
0
Ext JS 4即将正式发布,值得期待

Ext JS是一个针对Web的UI库。它是市场上的轻量级工具,它通过抽象,支持开发人员不必强制性地编写HTML的源代码,而且允许开发人员灵活的扩展组件库或者通过简单强大的插件架构创建真实的插件...

张金富
2011/11/04
0
2
Datatables快速入门开发--一款好用的JQuery表格插件

  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquer...

冬至饮雪
2017/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day99-20180926-英语流利阅读-待学习

换汤不换药的美容大忽悠:从抗衰老到肌肤焕发新生 Lala 2018-09-26 1.今日导读 说到护肤品,一个个大牌广告就浮现在我们眼前:皮肤吹弹可破的女明星手捧功能各异的瓶瓶罐罐,暗示着消费者买买...

飞鱼说编程
33分钟前
3
0
FFmpeg Maintainer赵军:FFmpeg关键组件与硬件加速

大家好!我是赵军,现就职于英特尔的DCG从事基于FFmpeg的硬件优化工作,两年多前加入FFmpeg社区,2018年4月成为FFmpeg的其中的一个FFmpeg Maintainer,主要负责FFmpeg的硬件优化工作。 概览:...

yizhichao
今天
1
0
ehlib 修改 使行号字体颜色 与标题字体颜色 一致

对ehlib 显示效果不够满意,而做的调整 修改这个过程:procedure TCustomDBGridEh.DrawIndicatorCell(ACol, ARow: Longint; AreaCol, AreaRow: Longint; ARect: TRect; AState: TGri......

vga
今天
1
0
Bash重定向详解

Bash重定向详解 Bash的重定向指的是将命令的输入和输出导向不同地方,而不是默认的标准输入、标准输出和标准错误。Bash的重定向实际上是对标准输入、标准输出和标准错误的重置,进而将所需输...

小陶小陶
今天
3
0
EventBus原理深度解析

一、问题描述 在工作中,经常会遇见使用异步的方式来发送事件,或者触发另外一个动作:经常用到的框架是MQ(分布式方式通知)。如果是同一个jvm里面通知的话,就可以使用EventBus。由于Event...

yangjianzhou
今天
54
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部