本地分頁（適合數據一次加載類型）

 

如今廣泛的作法是經過ajax傳遞頁數返回頁面數據等信息，不過我無聊，就作了一個本身控制的分頁；

由於無聊因此很少說了，直接上代碼

 js：

 1 //分頁控制（傳遞頁數）
 2 function ListPage(index) {
 3 var list = [];
 4 var num = parseInt(index);
 5 
 6 var first = parseInt($("tbody tr").first().attr("data-page"));//獲取首頁頁數，默認1
 7 
 8 var last = parseInt($("tbody tr").last().attr("data-page"));//獲取末尾頁數
 9 
10 if(first<=num && num<=last){
11 $("tbody tr").hide().each(function(i, v) {
12 if ($(v).attr("data-page") == num) {
13 $(v).fadeIn();
14 }
15 });
16 if (num == first) {
17 for (var a = num; a < num + 3 || a < last; a++) {
18 var l = "<li>" + a + "</li>";
19 list.push(l);
20 }
21 }
22 if (num != first && num != last) {
23 for (var a = num - 1; a < num + 2 || a < last; a++) {
24 var l = "<li>" + a + "</li>";
25 list.push(l);
26 }
27 }
28 if (num == last) {
29 for (var a = num; a > last - 3 || a > first; a--) {
30 var l = "<li>" + a + "</li>";
31 list.unshift(l);
32 }
33 }
34 $("").html(list.join(""));//把數據寫進分頁導航
35 }
36 }

 

 1 //分頁切換(前)
 2 $body.on("click",".front>li",function(){
 3 var first = $("tbody tr").first().attr("data-page");
 4 var index="";
 5 $("tbody tr").each(function(i,v){
 6 if($(v).css("display")!="none"){
 7 index=$(v).attr("data-page");
 8 return;
 9 }
10 });
11 if($(this).index()==0){
12 pagingListPage(first);//返回最前頁
13 }else{
14 pagingListPage(parseFloat(index)-1);//返回前一頁
15 }
16 })
17 //分頁切換(後)
18 $body.on("click",".next>li",function(){
19 var last = $("tbody tr").last().attr("data-page");
20 var index="";
21 $(".media_search tbody tr").each(function(i,v){
22 if($(v).css("display")!="none"){
23 index=$(v).attr("data-page");
24 return;
25 }
26 });
27 if($(this).index()==1){
28 pagingListPage(last);//返回最後頁
29 }else{
30 pagingListPage(parseFloat(index)+1);//返回後一頁
31 }
32 })
33 //分頁切換(分頁)
34 $body.on("click",".list_page>li",function(){
35 pagingListPage($(this).text());//返回點擊頁
36 })

 

html：

 1 <div>
 2 <ul class="front">
 3 <li><i class="iconfont icon-iconzuoyou"></i></li>
 4 <li><i class="iconfont icon-iconzuoyou"></i></li>
 5 </ul>
 6 <ul class="list_page">
 7 <li>1</li>
 8 <li>2</li>
 9 <li>3</li>
10 </ul>
11 <ul class="next">
12 <li><i class="iconfont icon-right"></i></li>
13 <li><i class="iconfont icon-right"></i></li>
14 </ul>
15 </div>

 

簡單的方法、思路，留做記念。