12月我们来了,新的网站模板正在寻找之中,有什么好的模板可以给博主留言
首页 » 福利 » jQuery ajax翻页实例
jQuery ajax翻页实例
  • admin
  • 2018-12-05
  • 16 次
  • 0 条
  • 福利

  • 使用方法
    1、引入jq,引入paging.js
    2、初始化,传入列表标识、初始页(选传,默认1)、每页列表数、列表总数、回调(选传,用于ajax)
    3、demo使用方法:当前为模拟ajax翻页,想使用纯html切换,只需要把18~21注释去掉,把初始化回调去掉就可以了
    HTML代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="paging.js"></script>
    </head>
    <body>
    <ul id="pageBox">
     <li class='list'>1</li>
     <li class='list'>2</li>
     <li class='list'>3</li>
     <li class='list'>4</li>
     <li class='list'>5</li>
    </ul>
    <script type="text/javascript">
    //纯html切换
    //   $("#pageBox").empty();
    //   for(var i = 1;i<32;i++){
    //    $("#pageBox").append("<li class='list'>"+i+"</li>")
    //   }
    var options = {
     list: ".list",
     //列表标识
     currentPage: 1,
     //初始页(选传,默认1)
     pageSize: 5,
     //每页列表数
     listTotal: 31,
     //列表总数(选传),不传为list总数
     callback: function(currentPage) { //翻页回调(可填,可做ajax请求),不传为纯html切换
      loadData(ajaxDemo(currentPage))
     }
    }
    $("#pageBox").paging(options)
     
    function ajaxDemo(page, pageSize) {
     if (!pageSize) var pageSize = 5;
     var data = {},
      arr = [];
     for (var i = 1; i <= 31; i++) {
      arr.push(i);
      if (i == pageSize) {
       data[1] = arr;
       arr = [];
      } else if (i == pageSize * 2) {
       data[2] = arr;
       arr = [];
      } else if (i == pageSize * 3) {
       data[3] = arr;
       arr = [];
      } else if (i == pageSize * 4) {
       data[4] = arr;
       arr = [];
      } else if (i == pageSize * 5) {
       data[5] = arr;
       arr = [];
      } else if (i == pageSize * 6) {
       data[6] = arr;
       arr = [];
      } else if (i == 31) {
       data[7] = arr;
       arr = [];
      }
     }
     return data[page];
    }
     
    function loadData(data) {
     console.log("callback")
     $("#pageBox").empty();
     for (var i = 0; i < data.length; i++) {
      $("#pageBox").append("<li class='list'>" + data[i] + "</li>");
     }
    }
    </script>
    </body>
    </html>
    

    paging.js
    创建JS文件并把以下文件复制粘贴到里面,文件名更名为paging.js

    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('(B($){$.1z.1v=B(8){h 1u=l,t=$(l);h 1p={10:"",d:1,y:5,v:t.7(8.10).Y,};8=$.1I(1p,8);b(t.1t().s(".6").Y<=0){t.1t().1H("<c o=\'6\' 1J=\'1L 1G\'><c o=\'w H\'>1C</c><c o=\'w G\'><a>1B</a></c><c o=\'T\'><c o=\'x\'><c o=\'w e 9\'><a>1</a></c></c></c><c o=\'w F g\'><a>1D</a></c><c o=\'w P\'>1F<M></M>15</c><c o=\'w 1E\'>1K<1s 1A=\'A\' o=\'C\'/>15</c><c o=\'w O\'><a>1y</a></c></c>")}b(8.d!=1)$(".6 .H").n("g").p("g");h 6=t.1w().s(".6");h N=u(6.7(".9").1x())+u(6.7(".9").12("D-K"))+u(6.7(".9").12("D-1U"));b(8.v<=0){6.1q();b(!t.1T("1S")){h W="<c o=\'V\' 13=\'X: 14%;Q: R;A-1f: 1j;1i: #1b;1a-Q: R;1e-1d: 1c;1h: #1g;\'>16</c>"}f{h 18=t.7("1V").Y;h W="<17 o=\'V\'><19 1X="+18+" 13=\'X: 14%;Q: R;A-1f: 1j;1i: #1b;1a-Q: R;1e-1d: 1c!1W;1h: #1g;\'>16</19></17>"}t.1r(W)}f{6.1k();$(".V").1O()}h r=0;b(8.v/ 8.y > u(8.v /8.y)){r=u(8.v/8.y)+1}f{r=u(8.v/8.y)}6.7(".P M").A(r);6.7(".T .x").1N();1m(h k=1;k<=r;k++){6.7(".T .x").1r("<c o=\'w 9\'><a>"+k+"</a></c>")}b(!8.q)z();6.7(".9").j(8.d-1).p(\'e\');6.7(".9").j(8.d-1).s(".6 .9").n(\'e\');b(6.7(".9").1n().m("e")){6.7(".G").n("g")}f{6.7(".G").p("g")};b(6.7(".9").1l().m("e")){6.7(".F").n("g")}f{6.7(".F").p("g")};6.7(".C").U("1s 1M",B(){b(6.7(".C").I()==\'\'||!6.7(".C").I()){6.7(".O").n("g")}f{6.7(".O").p("g")}b(6.7(".C").I()>u(6.7(".P M").A())){6.7(".C").I(u(6.7(".P M").A()))}});6.7(".9").U("Z",B(){$(l).p("e");$(l).s(".6 .9").n("e")});6.7(".w").1R("Z").U("Z",B(){b($(l).m("9")){h k=$(l).A();6.7(".9").j(k-1).p("e");6.7(".9").j(k-1).s(".6 .9").n("e");8.d=k;b(8.q){8.q(8.d)}f{z()}E(k-1)}f b($(l).m("O")&&$(l).m("g")){h k=u($(l).s().7(".C").I());6.7(".9").j(k-1).p("e");6.7(".9").j(k-1).s(".6 .9").n("e");8.d=k;b(8.q){8.q(8.d)}f{z()}E(k-1);b(k>=r-2){6.7(".x").S({\'D-K\':\'-\'+N*(k-3)+\'J\'})}}f b($(l).m("G")&&$(l).m("g")){6.7(".9").j(8.d-2).p("e");6.7(".9").j(8.d-2).s(".6 .9").n("e");8.d--;b(8.q){8.q(8.d)}f{z()}E(8.d-1)}f b($(l).m("F")&&$(l).m("g")){6.7(".9").j(8.d).p("e");6.7(".9").j(8.d).s(".6 .9").n("e");8.d++;b(8.q){8.q(8.d)}f{z()}E(8.d-1)}f b($(l).m("H")){6.7(".9").j(0).p("e");6.7(".9").j(0).s(".6 .9").n("e");8.d=1;b(8.q){8.q(8.d)}f{z()}E(0)}b(6.7(".9").1n().m("e")){6.7(".G").n("g")}f{6.7(".G").p("g")};b(6.7(".9").1l().m("e")){6.7(".F").n("g")}f{6.7(".F").p("g")};$(".6 .H").n("g");b(8.d!=1)$(".6 .H").p("g")});B E(i){b(r>5&&i>=4){6.7(".T").12("1P-X",N*5+"J");b(6.7(".9").j(i).m("e")&&i<=r-2){6.7(".x").S({\'D-K\':\'-\'+N*(i)+\'J\'})}f b(6.7(".9").j(i-2).m("e")&&i<=r){6.7(".x").S({\'D-K\':\'-\'+N*(i-4)+\'J\'})}}b(r>5&&i<=3&&i>=0){6.7(".x").S({\'D-K\':0+\'J\'})}}B z(){h 1o=(8.d-1)*8.y+1;h L=8.d*8.y;L=(L>8.v)?8.v:L;1m(h i=1;i<(8.v+1);i++){h 11=t.7(8.10).j(i-1);b(i>=1o&&i<=L){11.1k()}f{11.1q()}}}}})(1Q);',62,122,'||||||pagenation|find|options|pn||if|div|currentPage|curpage|else|active|var||eq||this|hasClass|removeClass|class|addClass|callback|totalPage|siblings|box|parseInt|listTotal|pagenum|pageswiper|pageSize|pageHtmlCallback|text|function|pageinput|margin|pageanimation|nextpage|lastpage|indexpage|val|px|left|endlist|span|pnWidth|pagesubbtn|totalpage|height|60px|animate|pageswiperbox|on|nodetailtips|html|width|length|click|list|ilist|css|style|100|页|暂无数据|tr|col|td|line|fff|24px|size|font|align|E9514E|color|background|center|show|last|for|first|startlist|defaults|hide|append|input|parent|_0|paging|parents|outerWidth|确定|fn|type|上一页|首页|下一页|pagetext|共|false|after|extend|onselectstart|到第|return|propertychange|empty|remove|min|jQuery|unbind|table|is|right|th|important|colspan'.split('|'),0,{}))



    博主介绍

  • 博主:寻梦xunm
  • 邮箱:vipshiyi@qq.com
  • 微信:shiihk
  • 熊掌号:奇乐之梦
  • 语录:追寻最初的梦想,坚持走下去!
  • 博主说说

    今天去逛了一下国际版的抖音,

    美版抖音怎么说呢?视频还是中规中矩吧,没有国内的那么DB,不过特么评论区80%都是国人的评论,整个人都感觉中国人民无处不在。

    日版抖音“简直就是福利版好吗”!上面80%都是漂亮的小姐姐,感觉整个人的荷尔蒙迅速暴涨,不过也就只能养养眼了。评论区呢比美版要好得多了,70%都是日本人。28%都是国人。