登录
当前位置： 首页 > 编程笔记 >

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

芮歌者
2023-03-14
本文向大家介绍分享一个自己写的简单的javascript分页组件，包括了分享一个自己写的简单的javascript分页组件的使用技巧和注意事项，需要的朋友参考一下

自己写的一个简单的分页组件,主要功能还有实现都在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();

});

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

 类似资料：
  • 分享一个自己动手写的jQuery分页插件

    本文向大家介绍分享一个自己动手写的jQuery分页插件，包括了分享一个自己动手写的jQuery分页插件的使用技巧和注意事项，需要的朋友参考一下 工作需要一个JS分页插件，心想自己动手写一个吧，一来上网找一个不清楚代码结构的，出了问题难以解决，而且网上的插件所包含的功能太多，有些根本用不到，就没必要加载那段JS，二来想起没写过jQuery插件，就当练一下手了，好了，先看结果： http://demo

  • 自己动手写的mybatis分页插件(极其简单好用)

    本文向大家介绍自己动手写的mybatis分页插件(极其简单好用)，包括了自己动手写的mybatis分页插件(极其简单好用)的使用技巧和注意事项，需要的朋友参考一下 刚开始项目，需要用到mybatis分页，网上看了很多插件，其实实现原理基本都大同小异，但是大部分都只给了代码，注释不全，所以参考了很多篇文章（每篇文章偷一点代码，评出来自己的，半抄袭），才自己模仿着写出了一个适合自己项目的分页插件，话不

  • 自己动手写的jquery分页控件(非常简单实用)

    本文向大家介绍自己动手写的jquery分页控件(非常简单实用)，包括了自己动手写的jquery分页控件(非常简单实用)的使用技巧和注意事项，需要的朋友参考一下 最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了。写的不好，还请见谅，本分页控件在chrome测试过，其他的兼容性不知

  • 分享一个简单的sql注入

    本文向大家介绍分享一个简单的sql注入，包括了分享一个简单的sql注入的使用技巧和注意事项，需要的朋友参考一下 所谓SQL注入，就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站

  • 尝试自己动手用react来写一个分页组件(小结)

    本文向大家介绍尝试自己动手用react来写一个分页组件(小结)，包括了尝试自己动手用react来写一个分页组件(小结)的使用技巧和注意事项，需要的朋友参考一下 本文介绍了尝试自己动手用react来写一个分页组件(小结)，分享给大家，具体如下： 分页效果 在线预览 github地址 效果截图（样式可自行修改）： 构建项目 分页组件 1.子组件 创建 Pagecomponent.js 文件 核心代码：

  • PHP分页初探 一个最简单的PHP分页代码的简单实现

    本文向大家介绍PHP分页初探 一个最简单的PHP分页代码的简单实现，包括了PHP分页初探 一个最简单的PHP分页代码的简单实现的使用技巧和注意事项，需要的朋友参考一下 PHP分页代码在各种程序开发中都是必须要用到的，在网站开发中更是必选的一项。 要想写出分页代码，首先你要理解SQL查询语句：select * from goods limit 2,7。PHP分页代码核心就是围绕这条语句展开的，SQL

  • 自己封装的常用javascript函数分享

    本文向大家介绍自己封装的常用javascript函数分享，包括了自己封装的常用javascript函数分享的使用技巧和注意事项，需要的朋友参考一下 都是些常用的功能，这里就不多废话了，小伙伴们自己看下就明白了 奉上代码：

  • 分享一个简单的java爬虫框架

    本文向大家介绍分享一个简单的java爬虫框架，包括了分享一个简单的java爬虫框架的使用技巧和注意事项，需要的朋友参考一下 反复给网站编写不同的爬虫逻辑太麻烦了,自己实现了一个小框架 可以自定义的部分有: 请求方式(默认为Getuser-agent为谷歌浏览器的设置),可以通过实现RequestSet接口来自定义请求方式 储存方式(默认储存在f盘的html文件夹下),可以通过SaveUtil接口来

相关阅读

PHP分页初探 一个最简单的PHP分页代码的简单实现自己封装的常用javascript函数分享分享一个简单的java爬虫框架自己常用的一些shell脚本分享JQuery做的一个简单的点灯游戏分享

相关文章

小厂 一面分享2021简单课堂自我介绍两分钟分享Python开发的13个小游戏【分享】一部分Android面试题总结~Q1:请先做一个简单的自我介绍。新媒体运营人面试满分回答！

相关问答

写一个简单的cron作业来运行一个Java类DynamicJasper：一页中的3个报告部分Wordpress中的上一个下一个链接，带有多个分页符的单篇文章创建一个简单的登录页面问题自己写的os.walk比自己os.walk慢得多-为什么？

相关工具

优分享浏览器百度云分享爬虫简单的广告栏简单的地图路径简单的A＊寻路demo

相关文档

自己动手写 servlet 容器Java 经验分享如何实现自己的 jQuery开发学习笔记分享Markdown 简单的世界
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.