1. <html>
  2.     <head>
  3.         <title>jQuery Easy-Paging Test</title>
  4.     </head>
  5.     <body>
  6.         <ol id="paging">
  7.             <li>Prev</li>
  8.             <li>Page #n</li>
  9.             <li>Page #n</li>
  10.             <li>Page #n</li>
  11.             <li>Page #n</li>
  12.             <li>Page #n</li>
  13.             <li>Page #n</li>
  14.             <li>Page #n</li>
  15.             <li>Next</li>
  16.         </ol>
  17.         <script src="jquery.min.js"></script>
  18.         <script src="jquery.paging.min.js"></script>
  19.         <script src="jquery.easy-paging.js"></script>
  20.         <script>
  21.             $("#paging").easyPaging(1000, {
  22.                 onSelect: function(page) {
  23.                 }
  24.             });
  25.         </script>
  26.     </body>
  27. </html>

懒得去找插件的话将js代码复制回去

jquery.paging.min.js

  1. /*
  2. jQuery paging plugin v1.2.0 23/06/2014
  3. http://www.xarg.org/2011/09/jquery-pagination-revised/
  4.  
  5. Copyright (c) 2011, Robert Eisele (robert@xarg.org)
  6. Dual licensed under the MIT or GPL Version 2 licenses.
  7. */
  8. (function(n,v,r){n.fn.paging=function(z,A){var t=this,b={setOptions:function(a){b.a=n.extend(b.a||{lapping:0,perpage:10,page:1,refresh:{interval:10,url:null},format:"",lock:!1,onClick:null,onFormat:function(){},onSelect:function(){return!0},onRefresh:function(){}},a||{});b.a.lapping|=0;b.a.perpage|=0;null!==b.a.page&&(b.a.page|=0);1>b.a.perpage&&(b.a.perpage=10);b.interval&&v.clearInterval(b.interval);b.a.refresh.url&&(b.interval=v.setInterval(function(){n.ajax({url:b.a.refresh.url,success:function(a){if("string"===
  9. typeof a)try{a=n.parseJSON(a)}catch(m){return}b.a.onRefresh(a)}})},1E3*b.a.refresh.interval));b.format=function(a){for(var b=0,g=0,h=1,e={f:[],i:0,h:0,b:5,current:3,l:0,m:0},c,p=/[*<>pq\[\]().-]|[nc]+!?/g,n={"[":"first","]":"last","<":"prev",">":"next",q:"left",p:"right","-":"fill",".":"leap"},f={};c=p.exec(a);)c=""+c,r===n[c]?"("===c?g=++b:")"===c?g=0:h&&("*"===c?(e.i=1,e.h=0):(e.i=0,e.h="!"===c.charAt(c.length-1),e.b=c.length-e.h,(e.current=1+c.indexOf("c"))||(e.current=1+e.b>>1)),e.f[e.f.length]=
  10. {g:"block",j:0,c:0},h=0):(e.f[e.f.length]={g:n[c],j:g,c:r===f[c]?f[c]=1:++f[c]},"q"===c?++e.m:"p"===c&&++e.l);return e}(b.a.format);return b},setNumber:function(a){b.s=r===a||0>a?-1:a;return b},setPage:function(a){function w(a,b,c){c=""+a.onFormat.call(b,c);p=b.value?p+c.replace(/<a/i,'<a data-page="'+b.value+'"'):p+c}if(b.a.lock)return b.a.onSelect(0,t),b;if(r===a){if(a=b.a.page,null===a)return b}else if(b.a.page==a)return b;b.a.page=a|=0;var m=b.s,g=b.a,h,e,c,p,x=1,f=b.format,d,k,l,q,y=f.f.length,
  11. u=y;g.perpage<=g.lapping&&(g.lapping=g.perpage-1);q=m<=g.lapping?0:g.lapping|0;0>m?(c=m=-1,h=Math.max(1,a-f.current+1-q),e=h+f.b):(c=1+Math.ceil((m-g.perpage)/(g.perpage-q)),a=Math.max(1,Math.min(0>a?1+c+a:a,c)),f.i?(h=1,e=1+c,f.current=a,f.b=c):(h=Math.max(1,Math.min(a-f.current,c-f.b)+1),e=f.h?h+f.b:Math.min(h+f.b,1+c)));for(;u--;){k=0;l=f.f[u];switch(l.g){case "left":k=l.c<h;break;case "right":k=e<=c-f.l+l.c;break;case "first":k=f.current<a;break;case "last":k=f.b<f.current+c-a;break;case "prev":k=
  12. 1<a;break;case "next":k=a<c}x|=k<<l.j}d={number:m,lapping:q,pages:c,perpage:g.perpage,page:a,slice:[(k=a*(g.perpage-q)+q)-g.perpage,Math.min(k,m)]};for(p="";++u<y;){l=f.f[u];k=x>>l.j&1;switch(l.g){case "block":for(;h<e;++h)d.value=h,d.pos=1+f.b-e+h,d.active=h<=c||0>m,d.first=1===h,d.last=h===c&&0<m,w(g,d,l.g);continue;case "left":d.value=l.c;d.active=l.c<h;break;case "right":d.value=c-f.l+l.c;d.active=e<=d.value;break;case "first":d.value=1;d.active=k&&1<a;break;case "prev":d.value=Math.max(1,a-1);
  13. d.active=k&&1<a;break;case "last":(d.active=0>m)?d.value=1+a:(d.value=c,d.active=k&&a<c);break;case "next":(d.active=0>m)?d.value=1+a:(d.value=Math.min(1+a,c),d.active=k&&a<c);break;case "leap":case "fill":d.pos=l.c;d.active=k;w(g,d,l.g);continue}d.pos=l.c;d.last=d.first=r;w(g,d,l.g)}t.length&&(n("a",t.html(p)).click(g.onClick||function(a){a.preventDefault();a=this;do if("a"===a.nodeName.toLowerCase())break;while(a=a.parentNode);b.setPage(n(a).data("page"));b.o&&(v.location=a.href)}),b.o=g.onSelect.call({number:m,
  14. lapping:q,pages:c,slice:d.slice},a,t));return b}};return b.setNumber(z).setOptions(A).setPage()}})(jQuery,this);

jquery.easy-paging.js

  1. /**
  2.  * @license jQuery paging plugin v1.1.1 21/06/2014
  3.  * http://www.xarg.org/2011/09/jquery-pagination-revised/
  4.  *
  5.  * Copyright (c) 2011, Robert Eisele (robert@xarg.org)
  6.  * Dual licensed under the MIT or GPL Version 2 licenses.
  7.  **/
  8.  
  9. (function($) {
  10.  
  11.     $["fn"]["easyPaging"] = function(num, o) {
  12.  
  13.         if (!$["fn"]["paging"]) {
  14.             return this;
  15.         }
  16.  
  17.         // Normal Paging config
  18.         var opts = {
  19.             "perpage": 10,
  20.             "elements": 0,
  21.             "page": 1,
  22.             "format": "",
  23.             "lapping": 0,
  24.             "onSelect": function() {
  25.             }
  26.         };
  27.  
  28.         $["extend"](opts, o || {});
  29.  
  30.         var $li = $("li", this);
  31.  
  32.         var masks = {};
  33.  
  34.         $li.each(function(i) {
  35.  
  36.             if (0 === i) {
  37.                 masks.prev = this.innerHTML;
  38.                 opts.format += "<";
  39.             } else if (i + 1 === $li.length) {
  40.                 masks.next = this.innerHTML;
  41.                 opts.format += ">";
  42.             } else {
  43.                 masks[i] = this.innerHTML.replace(/#[nc]/, function(str) {
  44.                     opts["format"] += str.replace("#", "");
  45.                     return "([...])";
  46.                 });
  47.             }
  48.         });
  49.  
  50.         opts["onFormat"] = function(type) {
  51.  
  52.             var value = "";
  53.  
  54.             switch (type) {
  55.                 case 'block':
  56.  
  57.                     value = masks[this["pos"]].replace("([...])", this["value"]);
  58.  
  59.                     if (!this['active'])
  60.                         return '<li>' + value + '</li>';
  61.                     if (this["page"] !== this["value"])
  62.                         return '<li><a href="#' + this["value"] + '">' + value + '</a></li>';
  63.                     return '<li class="current">' + value + '</li>';
  64.  
  65.                 case 'next':
  66.                 case 'prev':
  67.                     if (!this['active'])
  68.                         return '<li>' + masks[type] + '</li>';
  69.                     return '<li><a href="#' + this["value"] + '">' + masks[type] + '</a></li>';
  70.             }
  71.         };
  72.  
  73.         $(this)["paging"](num, opts);
  74.  
  75.         return this;
  76.     };
  77.  
  78. }(jQuery));

仅分享，非个人所写。

最简单的pagging插件的更多相关文章

  1. 【UI插件】简单的日历插件（下）—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  2. Awesomplete - 零依赖的简单自动完成插件

    Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...

  3. 接口测试从未如此简单 - Postman (Chrome插件)

    接口测试从未如此简单 - Postman (Chrome插件) 一个非常有力的Http Client工具用来测试Web服务的, 我这里来介绍如何用它测试restful web service 注:转载 ...

  4. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  5. NSIS：简单按钮美化插件SkinButton，支持透明PNG图片。

    原文 NSIS:简单按钮美化插件SkinButton,支持透明PNG图片. 征得作者贾可的同意,特发布按钮美化插件SkinButton. 插件说明: 使用GDI+库写的一个简单按钮美化插件,支持透明P ...

  6. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  7. 实现一个简单的Vue插件

    我们先看官方文档对插件的描述 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/ ...

  8. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  9. XMPP即时通讯协议使用（五）——搭建简单的Openfire插件

    前言 在开发Openfire插件前需要构建完成服务器源码编辑环境,具体操作步骤请参照Openfire服务器源码编译的了解. 开发简单的Openfire插件 1.已构建完成的Openfire源码结构如下 ...

随机推荐

  1. __defineGetter__ && __defineSetter__

    看别人源码碰到的,做个备忘. //针对对象增加get\set方法,返回绑定函数的返回值 Date.prototype.__defineGetter__('getYear', function() {r ...

  2. 再探@font-face及webIcon制作

    @font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉.随着 web 的急速发 ...

  3. WPF路线图白皮书： 2015及未来

    介绍 当2006年微软首次推出Windows Presentation Foundation(WPF)时,它代表了应用程序的设计和开发又向前跨出了巨大的一步.它简化了GUI应用程序的开发,有助于UI和 ...

  4. windows批处理总结

    rem echo off 表示之后所有命令行不显示,但命令结果总是会显示的!! 不存在%ROOT_DIR% . %CUR_DIR%的变量 rem @表示命令行不显示当前行,但命令结果总是会显示的!! ...

  5. EF架构~在ef中支持IQueryable级别的Contains被翻译成了Exists，性能可以接受！

    回到目录 Entityframeworks很聪明 不错,非常不错!ef里的contains比linq to sql里的contains有了明显的提升,事实上,是在进行SQL语句翻译上有所提升,在lin ...

  6. Atitit dsl对于数组的处理以及main函数的参数赋值

    Atitit dsl对于数组的处理以及main函数的参数赋值 1.1. 词法解析..添加了[] 方括号的解析支持1 1.2. Ast建立.添加了数组参数的支持..使用了递归下降法..getparam ...

  7. java中string内存的相关知识点

    (一):区别java内存中堆和栈: 1.栈:数据可以共享,存放基本数据类型和对象的引用,其中对象存放在堆中,对象的引用存放在栈中: 当在一段代码块定义一个变量时,就在栈中 为这个变量分配内存空间,当该 ...

  8. 使用模板技术处理ASP.NET中GridView额外序号列的问题

    问题描述: 现在要在一张GridView表中添加一列来显示行号,要求是显示下一页的时候能够递增而不是从新编号.数据库中的没有相关序号列 如何在软件端实现呢? 通过测试,添加以下代码即可解决需求. &l ...

  9. java集合框架之List

    一.List: 1.  特有的常见方法:(有个共性特点就是都可以操作角标) (1).添加 void add(int Index , E element):在list的指定位置插入元素 void add ...

  10. 再谈collections模块defaultdict()和namedtuple()

    defaultdict()和namedtuple()是collections模块里面2个很实用的扩展类型.一个继承自dict系统内置类型,一个继承自tuple系统内置类型.在扩展的同时都添加了额外的很 ...