分享一个自己写的简单的javascript分页组件


Posted in Javascript onFebruary 15, 2015

自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id.

html结构如下:

<ul class="pagination" id="pageDIV">

</ul>

class="pagination" 给定了分页的样式,

id="pageDIV"用于放置JS生成的分页

CSS结构如下:

.pagination{

    margin-top: 10px;

    margin-bottom: 10px;

    display: inline-block;

    padding-left: 0;

    margin: 20px 0;

    border-radius: 4px;

}

.pagination>li {

    display: inline;

}

.pagination>li:first-child>a{

    margin-left: 0;

    border-top-left-radius: 4px;

    border-bottom-left-radius: 4px;

}

.pagination>li>a{

    position: relative;

    float: left;

    padding: 6px 12px;

    margin-left: -1px;

    line-height: 1.42857143;

    color: #337ab7;

    text-decoration: none;

    background-color: #fff;

    border: 1px solid #ddd;

    cursor: pointer;

}

.pagination>li>a.navcur{

    background: #cccccc;

    color: #ffffff;

}

下面是JS结构,注意要引用JQuery

/**

 * @pageContentID 渲染分页的DIV元素

 * @curPage 当前开始页

 * @totalCount 总数量

 * @pageRows 每页显示数量

 * @callback 显示数据的回调函数

 */

function PageList(pageContentID,option){

    this.pageContentID=document.getElementById(pageContentID);

    this.curPage=option.curPage;

    this.totalCount=option.totalCount;

    this.pageRows=option.pageRows;

    this.callback=option.callback;

    this.pageSize=Math.ceil(this.totalCount/this.pageRows);

}

PageList.prototype={

    init:function(){

        this.renderbtn();

    },

    firstpage:function(){

        var _self=this;

        _self._firstpage=document.createElement("li");

        _self._firstpageA=document.createElement("a");

        _self._firstpageA.innerHTML="首页";

        _self._firstpage.appendChild(_self._firstpageA);

        this.pageContentID.appendChild(_self._firstpage);

        _self._firstpage.onclick=function(){

            _self.gotopage(1);

        }

    },

    lastpage: function () {

      var _self=this;

        _self._lastpage=document.createElement("li");

        _self._lastpageA=document.createElement("a");

        _self._lastpageA.innerHTML="尾页";

        _self._lastpage.appendChild(_self._lastpageA);

        this.pageContentID.appendChild(_self._lastpage);

        _self._lastpage.onclick= function () {

            _self.gotopage(_self.pageSize);

        }

    },

    prewpage: function () {

        var _self=this;

        _self._prew=document.createElement("li");

        _self._prewA=document.createElement("a");

        _self._prewA.innerHTML="<<";

        _self._prew.appendChild(_self._prewA);

        this.pageContentID.appendChild(_self._prew);

        _self._prew.onclick= function () {

            if(_self.curPage>1){

                _self.curPage--;

            }

            _self.callback.call(this,this.curPage);

            _self.init();

            console.log(_self.curPage);

        }

    },

    nextpage: function () {

        var _self=this;

        _self._next=document.createElement("li");

        _self._nextA=document.createElement("a");

        _self._nextA.innerHTML=">>";

        _self._next.appendChild(_self._nextA);

        this.pageContentID.appendChild(_self._next);

        _self._next.onclick= function () {

            if(_self.curPage<_self.pageSize){

                _self.curPage++;

            }

            _self.callback.call(this,this.curPage);

            _self.init();

            console.log(_self.curPage);

        }

    },

    pagenum: function () {

        var _self=this;

        if(this.pageSize<=10){

            for(var i= 1,len=this.pageSize;i<=len;i++){

                _self._num=document.createElement("li");

                _self._numA=document.createElement("a");

                _self._numA.innerHTML=i;

                _self._num.appendChild(_self._numA);

                this.pageContentID.appendChild(_self._num);

                _self._num.onclick= function () {

                    var curpage = $(this).text();

                    _self.gotopage(curpage);

                }

            }

        }

        else{

            if(_self.curPage<=10){

                for(var i= 1;i<=10;i++){

                    _self._num=document.createElement("li");

                    _self._numA=document.createElement("a");

                    _self._numA.innerHTML=i;

                    _self._num.appendChild(_self._numA);

                    this.pageContentID.appendChild(_self._num);

                    _self._num.onclick= function () {

                        var curpage = $(this).text();

                        _self.gotopage(curpage);

                    }

                }

            }

            else if(_self.curPage>10&&_self.curPage<=this.pageSize){

                if(this.pageSize<Math.ceil(_self.curPage/10)*10){

                    for(var i=Math.floor(_self.curPage/10)*10+1;i<=this.pageSize;i++){

                        if(_self.curPage>this.pageSize)

                        return;

                        _self._num=document.createElement("li");

                        _self._numA=document.createElement("a");

                        _self._numA.innerHTML=i;

                        _self._num.appendChild(_self._numA);

                        this.pageContentID.appendChild(_self._num);

                        _self._num.onclick= function () {

                            var curpage = $(this).text();

                            _self.gotopage(curpage);

                        }

                    }

                }else{

                    if(Math.ceil(_self.curPage/10)*10==_self.curPage){

                        for(var i=_self.curPage-9;i<=_self.curPage;i++){

                            _self._num=document.createElement("li");

                            _self._numA=document.createElement("a");

                            _self._numA.innerHTML=i;

                            _self._num.appendChild(_self._numA);

                            this.pageContentID.appendChild(_self._num);

                            _self._num.onclick= function () {

                                var curpage = $(this).text();

                                _self.gotopage(curpage);

                            }

                        }

                    }else{

                        for(var i=Math.floor(_self.curPage/10)*10+1;i<=Math.ceil(_self.curPage/10)*10;i++){

                            _self._num=document.createElement("li");

                            _self._numA=document.createElement("a");

                            _self._numA.innerHTML=i;

                            _self._num.appendChild(_self._numA);

                            this.pageContentID.appendChild(_self._num);

                            _self._num.onclick= function () {

                                var curpage = $(this).text();

                                _self.gotopage(curpage);

                            }

                        }

                    }

                }

            }

        }

        $(".pagination li").each(function(){

            if($(this)[0].innerText==_self.curPage){

                $(".pagination li").children("a").removeClass("navcur");

                $(this).children("a").addClass("navcur");

            }

        });

    },

    gotopage: function (curpage) {

        this.curPage=curpage;

        this.callback.call(this,this.curPage);

        this.init();

        console.log(this.curPage);

    },

    renderbtn: function () {

        $(".pagination").html("");

        this.firstpage();

        this.prewpage();

        this.pagenum();

        this.nextpage();

        this.lastpage();

    }

};

$(function(){

    var pager = new PageList("pageDIV",{

        curPage:1,

        totalCount:26,

        pageRows:1,

        callback:callbackFuc

    });

    pager.init();

});

function callbackFuc(curpage){

}

说明:

此分页是以10页为标准,低于10页的时候全部显示,大于10页的时候,进行翻页显示余下页数.

调用方法:

$(function(){

    var pager = new PageList("pageDIV",{

        curPage:1,

        totalCount:26,

        pageRows:1,

        callback:callbackFuc

    });

    pager.init();

});

以上就是本分页组件的核心代码了,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 #Javascript
jQuery中extend函数详解
Feb 13 #Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 #Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 #Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 #Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 #Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 #Javascript
You might like
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
JS 控件事件小结
2012/10/31 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
ionic3 懒加载
2017/08/16 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python pip 常用命令汇总
2020/10/19 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
餐饮营销方案
2014/02/23 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
SQLServer之常用函数总结详解
2021/08/30 SQL Server
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js