文档章节

js分页组件

驛路梨花醉美
 驛路梨花醉美
发布于 2017/04/21 18:27
字数 779
阅读 18
收藏 0
点赞 0
评论 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
博文 150
码字总数 57303
作品 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
SlidesJS基本使用方法_已整理

来源 MZB大豆博客 Slides – 是一个简单的,容易定制和风格化,的jQuery幻灯片插件。 Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多...

辣条拌鱼翅
2015/01/01
0
0
asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下。 使用方法略过,这里将介绍如何实现打印多页是可以分页。 现在提供两种方法思路: 1、根据特定的打印机型号和使用的纸张类型,...

easonjim
2015/10/18
0
0
datagrid 的loaddata 家在本地数据问题

这里的jquery.form实现了Ajax功能,在成功读取数据之后,返回的数据格式虽然是map<String,Object>类型了,格式已经是json格式,但是直接datagrid('loadData',data).出现错误, 搜索了很久之...

LIPING234
2013/11/01
0
0
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0
关于bootstrap下拉框组件点击后不自动关闭的处理

我们在使用bootstrap下拉框组件时,有时会有如下需求,比如,下拉框中有分页的需求,如果你点击翻页时那下拉框会自动关闭,再打开下拉框又会重新刷新,这肯定是不满足条件的。所以就会有点击...

道之若无
04/17
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
PHPCMS_整合UEditor编辑器

①先到官网下载资源包(先定制编辑器导航工具,再下载) ②上传到phpcms默认的js文件路径,上传后的文件路径如下 staticsjsueditor ②打开/phpcms/libs/classes/form.class.php,找到如下代码...

喵王不瞌睡
2014/03/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
53分钟前
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
今天
1
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
今天
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
1
0
Dubbo解析(六)-服务调用

当dubbo消费方和提供方都发布和引用完成后,第四步就是消费方调用提供方。 还是以dubbo的DemoService举例 -- 提供方<dubbo:application name="demo-provider"/><dubbo:registry address="z...

青离
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部