文档章节

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
博文 164
码字总数 60589
作品 0
海淀
程序员
私信 提问
基于 jQuery 的 JavaScript 分页组件 - Pagination

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

勤劳的小木匠
07/19
0
0
13 个最佳 JavaScript 数据表格库

JavaScript 是一种通常被用在网页开发中的编程语言。它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效。它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处...

oschina
2017/03/10
5K
7
bboss分页组件翻页js前置处理函数和js后置处理函数使用方法

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

bboss
2014/01/16
0
0
前端用什么最省力? 最好的弹窗组件 js

js 框架: vue.js web弹层组件 当属layer.js 非常强大 简单易用 使用例子: [http://layer.layui.com/] 分页组件: laypage 【[http://laypage.layui.com] 】) 非常强大 pace.js – 网页自动...

猿神出窍
2016/11/08
0
0
Extjs gridPanl中本地数据分页

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

EDIAGD
2013/09/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 其实我在地板也睡不着

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @witt-z :分享歌词: 阴天 在不开灯的房间,当所有思绪都一点一点沉淀。 分享莫文蔚的单曲《阴天》: 《阴天》- 莫文蔚 手机党少年们想听歌,...

小小编辑
8分钟前
9
3
微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
3
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
4
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部