最近做了个项目,有用到分页, 这类插件应该是很常用的, 虽然网上很多现成的分页插件, 但是还是想着自己写一个, 给自己积累点东西, 顺便练练手, 写了差不多3个小时左右, 代码如下:

代码:

  1.  <!DOCTYPE HTML>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>分页插件</title>
  6.      <style type="text/css">
  7.          body{padding: 0px; margin: 0px;}
  8.          .content{width: 980px; margin: 0 auto; padding-top: 50px;}
  9.          ul{margin:0px; padding:0px;}
  10.          ul li{margin:0px; padding:0px; list-style:none; float:left;}
  11.      </style>
  12.  </head>
  13.  <body>
  14.      <div class="content">
  15.          <p>当前页: <input type="text" id="txtPageIndex" /></p>
  16.          <p>总页数: <input type="text" id="txtPageCount" /></p>
  17.          <p><button id="btnSubmit">submit</button></p>
  18.          <br />
  19.          <br />
  20.  
  21.          <p>输出:</p>
  22.          <div id="pageBox">
  23.  
  24.          </div>
  25.      </div>
  26.  
  27.  <script type="text/javascript">
  28.      function byID(id){
  29.          return document.getElementById(id);
  30.      }
  31.  
  32.      var ui = {};
  33.          ui.btnSubmit = byID('btnSubmit');
  34.          ui.txtPageIndex = byID('txtPageIndex');
  35.          ui.txtPageCount = byID('txtPageCount');
  36.          ui.pageBox = byID('pageBox');
  37.  
  38.      ui.btnSubmit.onclick = function(){
  39.          var pageIndex = ui.txtPageIndex.value;
  40.          var pageCount = ui.txtPageCount.value;
  41.  
  42.          var options = {
  43.              pageIndex: parseInt(pageIndex),
  44.              pageCount: parseInt(pageCount),
  45.              container: ui.pageBox
  46.          };
  47.  
  48.          if(options.pageCount > 0){
  49.              var page = new pagination(options);
  50.                  page.init();
  51.          }else{
  52.              alert('总页数不能小于0');
  53.          }
  54.  
  55.      };
  56.  
  57.      function pagination(options){
  58.          this.pageIndex = options.pageIndex || 1;
  59.          this.pageCount = options.pageCount;
  60.          this.showPage = options.showPage || 3;
  61.          this.container = options.container;
  62.      }
  63.  
  64.      pagination.prototype = {
  65.          init: function(){
  66.              /*初始化检查当前页是否合理*/
  67.              this.pageIndex = this.pageIndex < 1 ? 1 : this.pageIndex;
  68.              this.pageIndex = this.pageIndex > this.pageCount ? this.pageCount : this.pageIndex;
  69.  
  70.              /*渲染UI*/
  71.              this.render();
  72.          },
  73.          render: function(){
  74.              var pageList, setting;
  75.  
  76.                  pageList = [];
  77.                  setting = this.getSetting(this.pageIndex);
  78.                  pageList.push('<ul class="pagination">');                
  79.  
  80.                  if(this.pageIndex > 1){
  81.                      pageList.push('<li><button value="' + setting.prev + '">上一页</button></li>');
  82.  
  83.                      if(setting.start > 1){
  84.                          pageList.push('<li><button value="1">1</button></li>');
  85.                      }
  86.  
  87.                      if(setting.start > 2){
  88.                          pageList.push('<li>...</li>');
  89.                      }
  90.                  }else{
  91.                      pageList.push('<li><button value="1" disabled="disabled">上一页</button></li>');
  92.                  }
  93.  
  94.                  for (var i = setting.start; i <= setting.end; i++) {
  95.                      if(i == this.pageIndex){
  96.                          pageList.push('<li><button value="' + i + '" disabled="disabled">' + i + '</button></li>');
  97.                      }else{
  98.                          pageList.push('<li><button value="' + i + '">' + i + '</button></li>');
  99.                      }
  100.                  };
  101.  
  102.                  if(this.pageIndex < this.pageCount){
  103.                      if(setting.end < this.pageCount){
  104.                          if(setting.end < (this.pageCount - 1)){
  105.                              pageList.push('<li>...</li>');
  106.                          }
  107.  
  108.                          pageList.push('<li><button value="' + this.pageCount + '">' + this.pageCount + '</button></li>');
  109.                      }
  110.  
  111.                      pageList.push('<li><button value="' + setting.next + '">下一页</button></li>');
  112.                  }else{
  113.                      pageList.push('<li><button value="' + this.pageCount + '" disabled="disabled">下一页</button></li>');
  114.                  }
  115.  
  116.                  pageList.push('</ul>');
  117.                  this.container.innerHTML = pageList.join('\n');
  118.                  this.regEvent();
  119.          },
  120.          regEvent: function(){
  121.              /*事件注册*/
  122.              var _this = this;
  123.              var button = this.container.getElementsByTagName('button');
  124.  
  125.              for(var i = 0; i < button.length; i++){
  126.                  button[i].onclick = function(){
  127.                      _this.change(parseInt(this.value));
  128.                  };
  129.              }
  130.          },
  131.          change: function(index){
  132.              /*当前页改变时触发*/
  133.              this.pageIndex = index;
  134.              this.render();
  135.              this.onChange(index);
  136.          },
  137.          getSetting: function(index){
  138.              var start, end, prev, next, s, e;
  139.  
  140.                  s = 0;
  141.                  e = 0;
  142.  
  143.                  start = index - this.showPage;
  144.                  end = index + this.showPage;
  145.  
  146.                  if(start < 1){
  147.                      s = Math.abs(start) + 1;
  148.                      start = 1;
  149.                  }
  150.  
  151.                  if(end > this.pageCount){
  152.                      e = end - this.pageCount;
  153.                      end = this.pageCount;
  154.                  }
  155.  
  156.                  if(s > 0 && e <= 0){
  157.                      e = s + end;
  158.                      end = e > this.pageCount ? this.pageCount : e;
  159.                  }else if(e > 0 && s <= 0){
  160.                      s = start - e;
  161.                      start = s < 1 ? 1: s;
  162.                  }                
  163.  
  164.                  prev = index > start ? index - 1 : 1;
  165.                  next = index < end ? index + 1 : end;
  166.  
  167.                  /*核心算法, 根据当前页计算出显示的起始页和截止页, 上一页, 下一页 这些数据*/
  168.                  return {start: start, end: end, prev: prev, next: next};
  169.          },
  170.          onChange: function(index){
  171.              /*空函数, 可覆盖*/
  172.              console.log(index);
  173.          }
  174.      };
  175.  
  176.  </script>
  177.  </body>
  178.  </html>

pagination分页插件的更多相关文章

  1. Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记

    入职以后的第二个任务  根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...

  2. jQuery Pagination分页插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery Pagination分页插件--刷新

    源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  4. JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

    JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1n ...

  5. Jquery Pagination分页插件使用

    JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...

  6. jQuery Pagination分页插件--无刷新

    源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代 ...

  7. jQuery Pagination分页插件的使用

    一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel=&qu ...

  8. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  9. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

随机推荐

  1. JavaScript学习总结(十六)——Javascript闭包（Closure）

    原文地址: http://www.cnblogs.com/xdp-gacl/p/3703876.html 闭包(closure)是Javascript语言的一个难点,也是它的特色, 很多高级应用都要依 ...

  2. OC基础7：变量和数据类型

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.有时候初始化需要让对象带有初始值,那么 ...

  3. Android自己定义组件系列【7】——进阶实践（4）

    上一篇<Android自己定义组件系列[6]--进阶实践(3)>中补充了关于Android中事件分发的过程知识.这一篇我们接着来分析任老师的<可下拉的PinnedHeaderExpa ...

  4. cocos2d-x ios游戏开发初认识(八) 触摸事件与碰撞检測

    玩过植物大战僵尸都知道,要在草坪里放一朵向日葵或者其他的植物仅仅需触摸那个植物将其拖入到想要摆放的位置,这事实上就是这节要写的触摸事件.还能够发现当我们的僵尸出来的时候,我们的小豌豆会发子弹攻击僵尸, ...

  5. pixel像素与物理像素

  6. poj 2431

    大意: 有n个加油点,给出每个加油点距离终点的位置和能加多少油,最后一行给出总长度和最初的油量.求最少加几次油能到终点,不能到的话输出-1. Sample Input 4 4 4 5 2 11 5 1 ...

  7. MSMQ是什么?

    MSMQ(MicroSoft Message Queue,微软消息队列)是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可以分布于相连的网络空间中的任一位 ...

  8. Hadoop 安装（3） JDK 的安装

    使用vsftp上传,JDK 和 Hadoop 到 Hadoop 用户目录. 安装JDK root 身份登录Slave4.Hadoop,在 /usr 下创建 "Java"文件夹,将j ...

  9. 02js高级Function

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. Unicode解码、URL编码/解码

    + (NSString *) stringByReplaceUnicode:(NSString *)string { NSMutableString *convertedString = [strin ...