admin

jQuery ajax翻页实例
使用方法1、引入jq,引入paging.js2、初始化,传入列表标识、初始页(选传,默认1)、每页列表数、列表总数...
扫描右侧二维码阅读全文
05
2018/12

jQuery ajax翻页实例

使用方法
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,{}))
Last modification:December 5th, 2018 at 03:29 pm
如果觉得我的文章对你有用,请随意赞赏

Comment here is closed