本地分页（适合数据一次加载类型）
现在普遍的做法是通过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>
简单的方法、思路，留作纪念。
