本地分页（适合数据一次加载类型）

现在普遍的做法是通过ajax传递页数返回页面数据等信息，不过我无聊，就做了一个自己控制的分页；

因为无聊所以不多说了，直接上代码

 js：

//分页控制（传递页数）
function ListPage(index) {
var list = [];
var num = parseInt(index);

var first = parseInt($("tbody tr").first().attr("data-page"));//获取首页页数，默认1

var last = parseInt($("tbody tr").last().attr("data-page"));//获取末尾页数

if(first<=num && num<=last){
$("tbody tr").hide().each(function(i, v) {
if ($(v).attr("data-page") == num) {
$(v).fadeIn();
}
});
if (num == first) {
for (var a = num; a < num + 3 || a < last; a++) {
var l = "<li>" + a + "</li>";
list.push(l);
}
}
if (num != first && num != last) {
for (var a = num - 1; a < num + 2 || a < last; a++) {
var l = "<li>" + a + "</li>";
list.push(l);
}
}
if (num == last) {
for (var a = num; a > last - 3 || a > first; a--) {
var l = "<li>" + a + "</li>";
list.unshift(l);
}
}
$("").html(list.join(""));//把数据写进分页导航
}
}

//分页切换(前)
$body.on("click",".front>li",function(){
var first = $("tbody tr").first().attr("data-page");
var index="";
$("tbody tr").each(function(i,v){
if($(v).css("display")!="none"){
index=$(v).attr("data-page");
return;
}
});
if($(this).index()==0){
pagingListPage(first);//返回最前页
}else{
pagingListPage(parseFloat(index)-1);//返回前一页
}
})
//分页切换(后)
$body.on("click",".next>li",function(){
var last = $("tbody tr").last().attr("data-page");
var index="";
$(".media_search tbody tr").each(function(i,v){
if($(v).css("display")!="none"){
index=$(v).attr("data-page");
return;
}
});
if($(this).index()==1){
pagingListPage(last);//返回最后页
}else{
pagingListPage(parseFloat(index)+1);//返回后一页
}
})
//分页切换(分页)
$body.on("click",".list_page>li",function(){
pagingListPage($(this).text());//返回点击页
})

html：

<div>
<ul class="front">
<li><i class="iconfont icon-iconzuoyou"></i></li>
<li><i class="iconfont icon-iconzuoyou"></i></li>
</ul>
<ul class="list_page">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="next">
<li><i class="iconfont icon-right"></i></li>
<li><i class="iconfont icon-right"></i></li>
</ul>
</div>

简单的方法、思路，留作纪念。