最近做了个项目,有用到分页, 这类插件应该是很常用的, 虽然网上很多现成的分页插件, 但是还是想着自己写一个, 给自己积累点东西, 顺便练练手, 写了差不多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. Makefile里面的$(MAKE)到底是啥

    [已解决]Makefile里面的$(MAKE)到底是啥 [复制链接] http://bbs.chinaunix.net/thread-4164499-1-1.html make 定义了很多默认变量,像 ...

  2. hdu 1035 Robot Motion（模拟）

    Problem Description A robot has been programmed to follow the instructions in its path. Instructions ...

  3. 使用工具来提升Android开发效率

    正所谓工欲善其事,必先利其器.学习并应用优秀的轮子,能够让我们跑的更快,走的更远.这里所指的工具是广义的,泛指能帮助我们开发的东西,或者能提高我们效率的东西,包含:开发工具.监測工具.第三方代码库等. ...

  4. hyper-v新内容

    摘自http://geek.csdn.net/news/detail/30249 继开源.NET,微软推出Hyper-V Container技术及Nano Server Hyper-V Server  ...

  5. Oracle 存储过程之通用分页查询

    在数据库中书写通用分页存储过程,有利于代码的维护以及执行效率的提升 create or replace procedure Sp_QueryDatePage ( tableName in varcha ...

  6. SQL Server AlwaysOn 故障转移

    目的: a) AlwaysOn 可用性组功能是一个提供替代数据库镜像的企业级方案的高可用性和灾难恢复解决方案. b) 当数据库服务器SQL1出现故障宕机时,可以通过AlwaysOn可用性组,自动故障转 ...

  7. c# List<string>和List<int>互相转换

    List<string> 转 List<int> var list = (new[]{"1","2","3"}).T ...

  8. NSURLSessionUploadTask 上传

    -(void)uploadPhotoImageWithUrl:(NSString*)url userIMID:(NSString*)userIMID imageData:(NSData*)imageD ...

  9. Java 四种线程池的使用

    java线程线程池监控 Java通过Executors提供四种线程池,分别为: newCachedThreadPool:创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收 ...

  10. [Linked List]Rotate List

    Total Accepted: 55428 Total Submissions: 250727 Difficulty: Medium Given a list, rotate the list to ...