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

代码:

 <!DOCTYPE HTML>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>分页插件</title>

     <style type="text/css">

         body{padding: 0px; margin: 0px;}

         .content{width: 980px; margin: 0 auto; padding-top: 50px;}

         ul{margin:0px; padding:0px;}

         ul li{margin:0px; padding:0px; list-style:none; float:left;}

     </style>

 </head>

 <body>

     <div class="content">

         <p>当前页: <input type="text" id="txtPageIndex" /></p>

         <p>总页数: <input type="text" id="txtPageCount" /></p>

         <p><button id="btnSubmit">submit</button></p>

         <br />

         <br />

         <p>输出:</p>

         <div id="pageBox">

         </div>

     </div>

 <script type="text/javascript">

     function byID(id){

         return document.getElementById(id);

     }

     var ui = {};

         ui.btnSubmit = byID('btnSubmit');

         ui.txtPageIndex = byID('txtPageIndex');

         ui.txtPageCount = byID('txtPageCount');

         ui.pageBox = byID('pageBox');

     ui.btnSubmit.onclick = function(){

         var pageIndex = ui.txtPageIndex.value;

         var pageCount = ui.txtPageCount.value;

         var options = {

             pageIndex: parseInt(pageIndex),

             pageCount: parseInt(pageCount),

             container: ui.pageBox

         };

         if(options.pageCount > 0){

             var page = new pagination(options);

                 page.init();

         }else{

             alert('总页数不能小于0');

         }

     };

     function pagination(options){

         this.pageIndex = options.pageIndex || 1;

         this.pageCount = options.pageCount;

         this.showPage = options.showPage || 3;

         this.container = options.container;

     }

     pagination.prototype = {

         init: function(){

             /*初始化检查当前页是否合理*/

             this.pageIndex = this.pageIndex < 1 ? 1 : this.pageIndex;

             this.pageIndex = this.pageIndex > this.pageCount ? this.pageCount : this.pageIndex;

             /*渲染UI*/

             this.render();

         },

         render: function(){

             var pageList, setting;

                 pageList = [];

                 setting = this.getSetting(this.pageIndex);

                 pageList.push('<ul class="pagination">');                

                 if(this.pageIndex > 1){

                     pageList.push('<li><button value="' + setting.prev + '">上一页</button></li>');

                     if(setting.start > 1){

                         pageList.push('<li><button value="1">1</button></li>');

                     }

                     if(setting.start > 2){

                         pageList.push('<li>...</li>');

                     }

                 }else{

                     pageList.push('<li><button value="1" disabled="disabled">上一页</button></li>');

                 }

                 for (var i = setting.start; i <= setting.end; i++) {

                     if(i == this.pageIndex){

                         pageList.push('<li><button value="' + i + '" disabled="disabled">' + i + '</button></li>');

                     }else{

                         pageList.push('<li><button value="' + i + '">' + i + '</button></li>');

                     }

                 };

                 if(this.pageIndex < this.pageCount){

                     if(setting.end < this.pageCount){

                         if(setting.end < (this.pageCount - 1)){

                             pageList.push('<li>...</li>');

                         }

                         pageList.push('<li><button value="' + this.pageCount + '">' + this.pageCount + '</button></li>');

                     }

                     pageList.push('<li><button value="' + setting.next + '">下一页</button></li>');

                 }else{

                     pageList.push('<li><button value="' + this.pageCount + '" disabled="disabled">下一页</button></li>');

                 }

                 pageList.push('</ul>');

                 this.container.innerHTML = pageList.join('\n');

                 this.regEvent();

         },

         regEvent: function(){

             /*事件注册*/

             var _this = this;

             var button = this.container.getElementsByTagName('button');

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

                 button[i].onclick = function(){

                     _this.change(parseInt(this.value));

                 };

             }

         },

         change: function(index){

             /*当前页改变时触发*/

             this.pageIndex = index;

             this.render();

             this.onChange(index);

         },

         getSetting: function(index){

             var start, end, prev, next, s, e;

                 s = 0;

                 e = 0;

                 start = index - this.showPage;

                 end = index + this.showPage;

                 if(start < 1){

                     s = Math.abs(start) + 1;

                     start = 1;

                 }

                 if(end > this.pageCount){

                     e = end - this.pageCount;

                     end = this.pageCount;

                 }

                 if(s > 0 && e <= 0){

                     e = s + end;

                     end = e > this.pageCount ? this.pageCount : e;

                 }else if(e > 0 && s <= 0){

                     s = start - e;

                     start = s < 1 ? 1: s;

                 }                

                 prev = index > start ? index - 1 : 1;

                 next = index < end ? index + 1 : end;

                 /*核心算法, 根据当前页计算出显示的起始页和截止页, 上一页, 下一页 这些数据*/

                 return {start: start, end: end, prev: prev, next: next};

         },

         onChange: function(index){

             /*空函数, 可覆盖*/

             console.log(index);

         }

     };

 </script>

 </body>

 </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. wxpython 拖动界面时进入假死状态（未响应）解决方法

    场景:在一个事件中调用一个函数,但是这个函数执行的时间非常的长,此过程中拖动界面的时候会使得界面进入未响应状态,直到函数执行完才可以ok 解决方法: 在调用函数的时候使用多线程调用 import th ...

  2. U盘量产的作用

    优盘量产:字面意思就是,批量生产优盘.是指批量对U盘主控芯片改写数据,如,写生产厂商信息.格式化等.而用来对U盘完成该操作的软件程序,顾名思义就是U盘量产工具.   U盘量产的作用:   电脑正确识别 ...

  3. Cocos2d-x优化中多线程并发訪问

    多线程并发訪问在Cocos2d-x引擎中用的不是非常多,这主要是由于中整个结构设计没有採用多线程. 源自于Objective-C的Ref对象,须要使用AutoreleasePool进行内存管理,Aut ...

  4. 解决初学者学不懂android，不理解android的设计

    最近在忙着搞一个小项目,所以没有来得及写一些原创性的东西,好容易今天中秋节,就趁现在写一些吧,今天仍然看了些老马的视频,尽管这些东西以前都用过,但是感觉仍然学到了不少东西,说给大家听希望大家也要不要不 ...

  5. 字符编码介绍及java中的应用

    字符编码,就是对日常的控制符号.文字和常用符号的二进制表示.为了准确的表示如何编号,怎么生产八位字节流,Unicode Technical Report (UTR) #17提出现代编码模型的5个层次: ...

  6. uva 10161 Ant on a Chessboard 蛇形矩阵 简单数学题

    题目给出如下表的一个矩阵: (红字表示行数或列数) 25 24 23 22 21 5 10 11 12 13 20 9 8 7 14 19 3 2 3 6 15 18 2 1 4 5 16 17 1 ...

  7. asp.netGridView使用技巧

    GridView属性介绍 AutoGenerateColumns 如果为true表示自动生成数据列,如果为false关闭自动生成状态 何为自动生成数据列  比如这么一个表格: country name ...

  8. 从头开始－03.C语言中数据类型

    基本数据类型 整形: Int 4字节 %d / %i Short 2字节 %hd Long 8字节 %ld Longlong 8字节 %lld Unsigned 4字节 % 浮点型 单精度 Float ...

  9. ASP.Net【如何合并DataTable，并且去重复方法】

    虽然DataTable.Merge可以很好的实现,但以下代码写出来更好理解 DataTable DataTable1 = new DataTable(); DataTable DataTable2 = ...

  10. 第三方浏览器内核嵌入一、Crosswalk

    本篇分为三部分: 介绍Crosswalk背景 介绍Crosswalk集成步骤 为了减小体积,仅集成兼容ARM的Crosswalk(针对X86同理) PART_A Crosswalk背景介绍 Web技术 ...