jquery page.js 實現ajax分頁
阿新 • • 發佈：2019-01-22
呼叫的是豆瓣的api
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ padding: 0px; margin: 0px; } *{ margin:0; padding:0; list-style:none;} a{ text-decoration:none;} a:hover{ text-decoration:none;} .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;} .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px; margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} .tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px; margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} ul{ list-style: none; } .wrap >ul > li{ width: 250px; height: 350px; margin: 20px; /*border: 1px green solid;*/ float: left; margin-bottom: 40px; } .wrap >ul > li>img{ width: 100%; height: 100%; } .wrap >ul > li>p{ text-align: center; line-height: 30px; height: 30px; } .wrap{ margin: 100px auto; border: 1px solid red; height: 1800px; width: 1460px; } </style> <body> <div class = 'wrap'> <ul class='movieList'> <!--<li>--> <!--<img src="" alt="">--> <!--<p>電影名：驚天魔盜團</p>--> <!--</li>--> </ul> <!-- 程式碼部分begin --> <div class="tcdPageCode"> </div> </div> </body> </html> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script> <script> $(function () { //初始化第一頁資料； var urlApi = 'http://api.douban.com/v2/movie/top250' $.ajax({ url:urlApi, type:'get', dataType:'jsonp', data:{ //從第幾條開始請求； "start" : 0, //請求多少條資料 "count" : 10 }, success:function(data){ //total總條數屬性，計算總頁數； console.log(data); var total = parseInt(data.total/10); console.log(total); //25 result = data.subjects; console.log(result); var str=''; for(var i=0;i<result.length;i++){ var item = result[i]; str += '<li><img src="'+item.images.large +'" alt=""><p>'+item.title+'</p></li>' } //追加渲染到頁面 $('.movieList').append(str) //分頁外掛， $(".tcdPageCode").createPage({ //pageCount：總頁數 pageCount:total, //current：當前頁 current:1, backFn:function(pageIndex){ //單擊回撥方法，pageIndex是當前頁碼 $(".movieList").empty(); var start = 10*pageIndex; $.ajax({ url:urlApi, type:'get', dataType:'jsonp', data:{ "start" : start, "count" : 10, }, success:function(data){ var result = data.subjects; var str=''; for(var i=0;i<result.length;i++){ var item = result[i]; str += '<li><img src="'+item.images.large +'" alt=""><p>'+item.title+'</p></li>' } $('.movieList').append(str) } }) } }); } }) }) </script>
線上預覽：http://codepen.io/dddddd1/pen/egmwLO
jquery.page.j原始碼
(function($){ var ms = { init:function(obj,args){ return (function(){ ms.fillHtml(obj,args); ms.bindEvent(obj,args); })(); }, //填充html fillHtml:function(obj,args){ return (function(){ obj.empty(); //上一頁 if(args.current > 1){ obj.append('<a href="javascript:;" class="prevPage">上一頁</a>'); }else{ obj.remove('.prevPage'); obj.append('<span class="disabled">上一頁</span>'); } //中間頁碼 if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>'); } if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ obj.append('<span>...</span>'); } var start = args.current -2,end = args.current+2; if((start > 1 && args.current < 4)||args.current == 1){ end++; } if(args.current > args.pageCount-4 && args.current >= args.pageCount){ start--; } for (;start <= end; start++) { if(start <= args.pageCount && start >= 1){ if(start != args.current){ obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>'); }else{ obj.append('<span class="current">'+ start +'</span>'); } } } if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ obj.append('<span>...</span>'); } if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>'); } //下一頁 if(args.current < args.pageCount){ obj.append('<a href="javascript:;" class="nextPage">下一頁</a>'); }else{ obj.remove('.nextPage'); obj.append('<span class="disabled">下一頁</span>'); } })(); }, //繫結事件 bindEvent:function(obj,args){ return (function(){ obj.on("click","a.tcdNumber",function(){ var current = parseInt($(this).text()); ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current); } }); //上一頁 obj.on("click","a.prevPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current-1); } }); //下一頁 obj.on("click","a.nextPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current+1); } }); })(); } } $.fn.createPage = function(options){ var args = $.extend({ pageCount : 10, current : 1, backFn : function(){} },options); ms.init(this,args); }