分享一个自己写的简单的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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
vue脚手架项目创建步骤详解
Mar 02 Vue.js
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
Laravel如何使用Redis共享Session
2018/02/23 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
谈谈vue中mixin的一点理解
2017/12/12 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
信息专业个人的自我评价
2013/12/27 职场文书
货车司机岗位职责
2014/03/18 职场文书
电力培训心得体会
2014/09/02 职场文书
四风自我剖析材料
2014/09/30 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
教师考核表个人总结
2015/02/12 职场文书