上次分享了一款jquery插件，現在依舊分享這個插件，不過上一次分享主要是用於regular框件，且每一頁數據都是從后端獲取過來的，這一次的分享主要是講一次性獲取完數據 然后手動進行分頁。此需求基本上是和前端搜索掛鈎的。所有的數據都在頁面里只是展示的不同。這樣前端搜索就能從全部數據中進行搜索，而不是尷尬的只能從某一頁里進行搜索，不過這種需求一般都在數據量較小的情況下才會使用，畢竟搜索功能一般不是前端來實現的。
這次的插件依舊是 http://106.2.44.116/src/javascript/base/jquery.pagination.js這款插件。
至於這個框架的詳細用法我就不再說了，上一篇里都寫了，現在直接從實現假分頁功能入手。
var list =[
{pic:"1",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"2",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"3",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"4",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"5",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"6",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"7",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"8",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"9",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"10",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"11",name:"zhang",number:"1234",section:"企業事業部"},
{pic:"12",name:"zhang",number:"1234",section:"企業事業部"},
];
首先我們假定這組數據是從后端傳來的全部數據
接下來定義一個新數組
var dataList =[];
我們假定需求為每頁展示4條數據
則第一步初始化分頁,具體配置信息見上一遍博客
$('.box').pagination({
totalData:12,//一共的條數
showData:4,//每頁展示的條數
coping:true,
jump:true,
keepShowPN:true,
homePage:'首頁',
endPage:'末頁',
prevContent:'上頁',
nextContent:'下頁',
callback:function(api){
}
},function(api){
$('.now').text(api.getCurrent());
});
分頁的效果為：（可自定義樣式，在css文件中寫即可，詳細見上一篇）
第二步設置頁面默認看見的四條信息，在整體回調函數中寫
function(api){ $('.now').text(api.getCurrent()); for(var i=0;i<4;i++){ $("<div class=\"conDv\">"+ "<div class=\"pic\">"+list[i].pic+"</div>"+ "<div class=\"name\">"+list[i].name+"</div>"+ "<div class=\"number\">"+list[i].number+"</div>"+ "<div class=\"section\">"+list[i].section+"</div>"+ "</div>").appendTo("#con"); dataList.push(list[i]); } });
現在默認的四條已經展示出來了，如圖（樣式自己定義即可）
第三步：點擊分頁操作時。在點擊回調中寫
callback:function(api){ $('.now').text(api.getCurrent()); api.getCurrent(); console.log((api.getCurrent()-1)*4+"到"+(api.getCurrent()-1)*4*2); $("#con").text(""); if(api.getCurrent() == 1){ for(var i=0;i<4;i++){ $("<div class=\"conDv\">"+ "<div class=\"pic\">"+list[i].pic+"</div>"+ "<div class=\"name\">"+list[i].name+"</div>"+ "<div class=\"number\">"+list[i].number+"</div>"+ "<div class=\"section\">"+list[i].section+"</div>"+ "</div>").appendTo("#con"); } }else{ var next= (api.getCurrent()-1)*4*2; if((api.getCurrent()-1)*4*2 >12){ next = 12; } for(var i= (api.getCurrent()-1)*4;i<next;i++){ $("<div class=\"conDv\">"+ "<div class=\"pic\">"+list[i].pic+"</div>"+ "<div class=\"name\">"+list[i].name+"</div>"+ "<div class=\"number\">"+list[i].number+"</div>"+ "<div class=\"section\">"+list[i].section+"</div>"+ "</div>").appendTo("#con"); } } }
其中第一頁和最后一頁要單獨處理，不能用通用公式，否則會報錯
至此一個簡單的分頁效果就完成了。效果如下，當點擊第二頁時，效果如下：
下面一段完整的代碼僅供大家參考
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/jquery-1.10.2.min.js"></script> 7 <script src="js/jquery.pagination.js"></script> 8 <style> 9 #con{ 10 width:100%; 11 } 12 .conDv{ 13 width:200px; 14 height:300px; 15 float:left; 16 } 17 .conDv .pic,.conDv .name,.conDv .number,.conDv .section{ 18 width:100%; 19 height:20px; 20 text-align:center; 21 line-height:20px; 22 } 23 .box{ 24 position: absolute; 25 bottom:630px; 26 left:40px; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="con"> 32 33 </div> 34 <div class="box"> 35 36 </div> 37 <script> 38 var list =[ 39 {pic:"1",name:"zhang",number:"1234",section:"企業事業部"}, 40 {pic:"2",name:"zhang",number:"1234",section:"企業事業部"}, 41 {pic:"3",name:"zhang",number:"1234",section:"企業事業部"}, 42 {pic:"4",name:"zhang",number:"1234",section:"企業事業部"}, 43 {pic:"5",name:"zhang",number:"1234",section:"企業事業部"}, 44 {pic:"6",name:"zhang",number:"1234",section:"企業事業部"}, 45 {pic:"7",name:"zhang",number:"1234",section:"企業事業部"}, 46 {pic:"8",name:"zhang",number:"1234",section:"企業事業部"}, 47 {pic:"9",name:"zhang",number:"1234",section:"企業事業部"}, 48 {pic:"10",name:"zhang",number:"1234",section:"企業事業部"}, 49 {pic:"11",name:"zhang",number:"1234",section:"企業事業部"}, 50 {pic:"12",name:"zhang",number:"1234",section:"企業事業部"}, 51 ]; 52 var dataList=[]; 53 54 $('.box').pagination({ 55 totalData:12, 56 showData:4, 57 coping:true, 58 jump:true, 59 keepShowPN:true, 60 homePage:'首頁', 61 endPage:'末頁', 62 prevContent:'上頁', 63 nextContent:'下頁', 64 callback:function(api){ 65 $('.now').text(api.getCurrent()); 66 api.getCurrent(); 67 console.log((api.getCurrent()-1)*4+"到"+(api.getCurrent()-1)*4*2); 68 $("#con").text(""); 69 70 if(api.getCurrent() == 1){ 71 for(var i=0;i<4;i++){ 72 $("<div class=\"conDv\">"+ 73 "<div class=\"pic\">"+list[i].pic+"</div>"+ 74 "<div class=\"name\">"+list[i].name+"</div>"+ 75 "<div class=\"number\">"+list[i].number+"</div>"+ 76 "<div class=\"section\">"+list[i].section+"</div>"+ 77 "</div>").appendTo("#con"); 78 } 79 }else{ 80 var next= (api.getCurrent()-1)*4*2; 81 if((api.getCurrent()-1)*4*2 >12){ 82 next = 12; 83 } 84 for(var i= (api.getCurrent()-1)*4;i<next;i++){ 85 $("<div class=\"conDv\">"+ 86 "<div class=\"pic\">"+list[i].pic+"</div>"+ 87 "<div class=\"name\">"+list[i].name+"</div>"+ 88 "<div class=\"number\">"+list[i].number+"</div>"+ 89 "<div class=\"section\">"+list[i].section+"</div>"+ 90 "</div>").appendTo("#con"); 91 } 92 } 93 94 } 95 96 },function(api){ 97 $('.now').text(api.getCurrent()); 98 for(var i=0;i<4;i++){ 99 $("<div class=\"conDv\">"+ 100 "<div class=\"pic\">"+list[i].pic+"</div>"+ 101 "<div class=\"name\">"+list[i].name+"</div>"+ 102 "<div class=\"number\">"+list[i].number+"</div>"+ 103 "<div class=\"section\">"+list[i].section+"</div>"+ 104 "</div>").appendTo("#con"); 105 dataList.push(list[i]); 106 } 107 }); 108 </script> 109 </body> 110 </html>
至此。一個假分頁功能已經實現。希望可以給大家帶來幫助