分页是前端经常会用到的一个非常实用的一个知识点，今天闲来没事，做了一个小demo，虽然样子，比较丑，哈哈哈，但是这是分页的核心思想都在，希望能给某个小伙伴一些启发。可直接复制在编辑器中运行。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            a{

                margin:5px;

            }

        </style>

    </head>

    <body>

        <div id="div1">

        </div>

    </body>

    <script>

        //采用组件的写法

        page({

            id:'div1',

            nowNum:10,　　　　//当前的页码

            allNum:10,　　　　//总共的页码

            callBack:function(now,all){

                alert('当前页：'+now+'总共页：'+all);

            }

        })

        function page(opt){

            if(!opt.id)return false;    //如果没有传元素，就不向下执行了

            var obj = document.getElementById(opt.id);

            var nowNum = opt.nowNum || 1;        //默认的处理

            var allNum = opt.allNum || 5;

            var callBack = opt.callBack || function(){};

            //首页

            if(nowNum>=4&&allNum>=6){

                var oA = document.createElement('a');

                oA.href = '#1';

                oA.innerHTML = '首页';

                obj.appendChild(oA);

            }

            //上一页

            if(nowNum>=2){

                var oA = document.createElement('a');

                oA.href = '#'+(nowNum-1);

                oA.innerHTML = '上一页';

                obj.appendChild(oA);

            }

            //当总页数小于等于5页的情况

            if(allNum<=5){

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

                    var oA = document.createElement('a');

                    oA.href = '#'+i;

                    if(nowNum == i){        //当前页的处理

                        oA.innerHTML = i;

                    }else{

                        oA.innerHTML = '[' + i + ']';

                    }

                    obj.appendChild(oA);

                }

            }else{        //当总页数大于5页的情况

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

                    var oA = document.createElement('a');

                    if(nowNum == 1 || nowNum == 2){        //对当前页是第一页和第二页的时候做一个特殊处理

                        oA.href = '#'+ i;

                        if(nowNum == i){

                            oA.innerHTML = i;

                        }else{

                            oA.innerHTML = '[' + i + ']';

                        }

                    }else if((allNum-nowNum) == 0 || (allNum-nowNum) == 1){        //最后两个页码做特殊处理

                        oA.href = '#'+ (allNum-5+i);

                        if((allNum - nowNum) == 0 && i == 5){            //这一块的逻辑较为复杂

                            oA.innerHTML = (allNum -5+i);

                        }else if((allNum - nowNum) == 1 && i == 4){

                            oA.innerHTML = (allNum -5+i);

                        }else{

                             oA.innerHTML = '['+(allNum-5+i)+']';

                        }

                    }else{

                        oA.href = '#'+ (nowNum-3+i);

                        if(i==3){

                            oA.innerHTML = (nowNum-3+i);

                        }else{

                            oA.innerHTML = '['+(nowNum-3+i)+']';

                        }

                    }

                    obj.appendChild(oA);

                }

            }

            //下一页

            if((allNum-nowNum)>=1){

                var oA = document.createElement('a');

                oA.href = '#'+(nowNum+1);

                oA.innerHTML = '下一页';

                obj.appendChild(oA);

            }

            //尾页

            if((allNum-nowNum)>=3 && allNum>=6){

                var oA = document.createElement('a');

                oA.href = '#'+allNum;

                oA.innerHTML = '尾页';

                obj.appendChild(oA);

            }

            //执行回调

            callBack(nowNum,allNum);

            //添加点击事件

            var aA = obj.getElementsByTagName('a');

            for(var i=0;i<aA.length;i++){

                aA[i].onclick = function(){

                    var nowNum = parseInt(this.getAttribute('href').substring(1))            //注意这里获取href的时候不要用this.href，因为这样获取到的是一个绝对地址,要用getAttribute

                    //获取到此刻的页码，重新渲染

                    obj.innerHTML = '';        //清空

                    page({

                        id:opt.id,

                        nowNum:nowNum,

                        allNum:allNum,

                        callBack:callBack

                    });

                    return false;    //阻止默认事件

                }

            }

        }

    </script>

</html>

js中的分页的更多相关文章

  1. asp.net mvc核心、实体框架和simplepagin .js中的分页

    下载demo - 516.1 KB , 介绍 这篇文章将解释如何在asp.net mvc核心应用程序中进行分页,目标是enity框架,并使用jquery模板simplepagin .js. 我的一个应 ...

  2. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  3. JS中也可以使用JSTL和EL标签

    //往上滑是调用分页 function Ajax(currPage, pageSize) { // ajax后台交互String currPage,String pageSize var el, Pl ...

  4. web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo

    背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...

  5. springboot中使用分页，文件上传，jquery的具体步骤(持续更新)

    分页: pom.xml     加依赖 <dependency> <groupId>com.github.pagehelper</groupId> <arti ...

  6. 修改bootstrap-table中的分页样式

    使用bootstrap-table时,使用$("")选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧. 最终找到与之对应的js(bootstrap-table ...

  7. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  8. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  9. 单纯用JS做的分页插件

    最近公司需要用到分页插件,由于市面上大多都是jQuery的分页插件,而且项目中有自己的工具类,所以说我在工具类中又添加了不依赖jQuery的分页插件,而且分页插件来说对DOM的操作也不是很多,就是用J ...

随机推荐

  1. iOS推送证书上传（转)

    iOS 推送证书制作(JAVA/PHP) 在使用Java或者PHP制作iOS推送服务器的时候,需要自己从开发者网站上导出的aps_developer_identity证书和Apple Developm ...

  2. KMeans聚类

    常用的聚类方法: ①分裂方法: K-Means算法(K-平均).K-MEDOIDS算法(K-中心点).CLARANS算法(基于选择的算法) ②层次分析方法: BIRCH算法(平衡迭代规约和聚类).CU ...

  3. 图像Resize中0.5像素中心对齐的问题

    目录 0.5像素对齐的问题 0.5像素对齐的问题 1. 问题提出 在进行图像缩放时,偶尔会看到一些比较奇怪的代码,其中有一个就是0.5像素中心对齐的问题,例如在OpenCV线性插值的代码中有类似如下操 ...

  4. 使用说明(2S)

    [Build Status] 功能 系统代理设置 PAC 模式和全局模式 [GFWList] 和用户规则 支持 HTTP 代理 支持多服务器切换 支持 UDP 代理 支持插件 下载 下载 [最新版]. ...

  5. 最新 网易java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易.京东.去哪儿等10家互联网公司的校招Offer,因为某些自身原因最终选择了网易.6.7月主要是做系统复习.项目复盘.LeetCode与牛客刷题 ...

  6. php 大数组 foreach 循环嵌套的性能优化

    前提:最近在做后台的时候,页面加载太慢,故第一时间想到的自然是优化SQL, 优化后sql查询速度从 2秒变成了零点几秒, 以为就这麽完事了,然并卵,加载竟然花费30秒! 这麽慢,然后在代码中分块记录它 ...

  7. Java线程状态的改变

    一.线程状态 线程的状态转换是线程控制的基础.线程状态总的可分为五大状态:分别是生.死.可运行.运行.等待/阻塞.用一个图来描述如下: 1.新状态:线程对象已经创建,还没有在其上调用start()方法 ...

  8. 【LOJ】#2210. 「HNOI2014」江南乐

    LOJ#2210. 「HNOI2014」江南乐 感觉是要推sg函数 发现\(\lfloor \frac{N}{i}\rfloor\)只有\(O(\sqrt{N})\)种取值 考虑把这些取值都拿出来,能 ...

  9. 写CSDN博客

    文章目录 前言 写博客的规范 写博客的小技巧 版权声明模板 博客表格模板 更改博客字体和颜色 LaTeX 数学公式 前言 这是一篇关于写CSDN博客的文章.记录我的博客规范,技巧,模板,心得. 写博客 ...

  10. Kafka集群安装及prometheus监控

    前提 zookeeper安装参考:https://www.cnblogs.com/JustinLau/p/11372782.html 其他安装参考:https://www.cnblogs.com/lu ...