• 最简单的pagging插件


    <html>
        <head>
            <title>jQuery Easy-Paging Test</title>
        </head>
        <body>
            <ol id="paging">
                <li>Prev</li>
                <li>Page #n</li>
                <li>Page #n</li>
                <li>Page #n</li>
                <li>Page #n</li>
                <li>Page #n</li>
                <li>Page #n</li>
                <li>Page #n</li>
                <li>Next</li>
            </ol>
            <script src="jquery.min.js"></script>
            <script src="jquery.paging.min.js"></script>
            <script src="jquery.easy-paging.js"></script>
            <script>
                $("#paging").easyPaging(1000, {
                    onSelect: function(page) {
                    }
                });
            </script>
        </body>
    </html>

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

    jquery.paging.min.js

    /*
    jQuery paging plugin v1.2.0 23/06/2014
    http://www.xarg.org/2011/09/jquery-pagination-revised/
    
    Copyright (c) 2011, Robert Eisele (robert@xarg.org)
    Dual licensed under the MIT or GPL Version 2 licenses.
    */
    (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"===
    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]=
    {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,
    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=
    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);
    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,
    lapping:q,pages:c,slice:d.slice},a,t));return b}};return b.setNumber(z).setOptions(A).setPage()}})(jQuery,this);

    jquery.easy-paging.js

    /**
     * @license jQuery paging plugin v1.1.1 21/06/2014
     * http://www.xarg.org/2011/09/jquery-pagination-revised/
     *
     * Copyright (c) 2011, Robert Eisele (robert@xarg.org)
     * Dual licensed under the MIT or GPL Version 2 licenses.
     **/
    
    (function($) {
    
        $["fn"]["easyPaging"] = function(num, o) {
    
            if (!$["fn"]["paging"]) {
                return this;
            }
    
            // Normal Paging config
            var opts = {
                "perpage": 10,
                "elements": 0,
                "page": 1,
                "format": "",
                "lapping": 0,
                "onSelect": function() {
                }
            };
    
            $["extend"](opts, o || {});
    
            var $li = $("li", this);
    
            var masks = {};
    
            $li.each(function(i) {
    
                if (0 === i) {
                    masks.prev = this.innerHTML;
                    opts.format += "<";
                } else if (i + 1 === $li.length) {
                    masks.next = this.innerHTML;
                    opts.format += ">";
                } else {
                    masks[i] = this.innerHTML.replace(/#[nc]/, function(str) {
                        opts["format"] += str.replace("#", "");
                        return "([...])";
                    });
                }
            });
    
            opts["onFormat"] = function(type) {
    
                var value = "";
    
                switch (type) {
                    case 'block':
    
                        value = masks[this["pos"]].replace("([...])", this["value"]);
    
                        if (!this['active'])
                            return '<li>' + value + '</li>';
                        if (this["page"] !== this["value"])
                            return '<li><a href="#' + this["value"] + '">' + value + '</a></li>';
                        return '<li class="current">' + value + '</li>';
    
                    case 'next':
                    case 'prev':
                        if (!this['active'])
                            return '<li>' + masks[type] + '</li>';
                        return '<li><a href="#' + this["value"] + '">' + masks[type] + '</a></li>';
                }
            };
    
            $(this)["paging"](num, opts);
            
            return this;
        };
    
    }(jQuery));

     仅分享,非个人所写。

  • 相关阅读:
    静态构造函数
    js-----Date对象
    JS中Math函数的常用方法
    js 简单数据类型和复杂数据类型的区别
    js new关键字 和 this详解
    JS 对象的三种创建方式
    js 预解析
    JS作用域问题
    js实现斐波那契数列
    JS 三元表达式
  • 原文地址:https://www.cnblogs.com/wuzhiquan/p/4925122.html
Copyright © 2020-2023  润新知