jquery li ul 伪分页_分享一个jquery的伪分页方法

原始的代码是来自这个网站http://www.csrcode.cn/article-3695-1.html 但是原始帖子我也不知道是哪个，我觉得不太好用，自己整合了一下，可以对表格数据进行伪分页，而且只需要执行简单的代码就可以实现。

实现的很简单、样式也不太好看，大家可以自行调整，纠正。

下面是一个table,tbody里加载tr数据，无论你怎么加载，

在数据加载完成后便可以对table数据进行伪分页、注意div引用的class,我填充的数据是四列的，所以td里加了colspan，div是分页显示区域

下面是css和js方法

.page_btn{padding-top:0px;}

.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}

.page_box{float:right;}

.num{padding:0 10px;}

js方法如下

//对tbody伪分页；pageDiv：用于显示分页数据的div tbodyId :tbody的ID，pageSize，分页数目

function pagiNation(pageDiv,tbodyId,pageSize){

$("#"+tbodyId+" tr:gt("+(pageSize-1)+")").hide();//初始化，前面pageSize-1条数据显示，其他的数据隐藏。

var total_q=$("#"+tbodyId+" tr").length;//总数据

var current_page=pageSize;//每页显示的数据

var current_num=1;//当前页数

var total_page= Math.ceil(parseFloat(total_q)/parseFloat(current_page));//总页数

var pagePlugIn = ""+

"上一页"+

""+

"1"+

"/"+

""+

"下一页"+

"";

$("#"+pageDiv+"").html(pagePlugIn);

var next=$("#"+tbodyId+"_next");//下一页

var prev=$("#"+tbodyId+"_prev");//上一页

$("#"+tbodyId+"_total").text("");//显示总页数

$("#"+tbodyId+"_total").text(total_page);//显示总页数

$("#"+tbodyId+"_current_page").text("");//当前的页数

$("#"+tbodyId+"_current_page").text(current_num);//当前的页数

//下一页

$("#"+tbodyId+"_next").unbind("click");

$("#"+tbodyId+"_next").click(function(){

if(current_num==total_page){

return false;//如果大于总页数就禁用下一页

}

else{

$("#"+tbodyId+"_current_page").text(++current_num);//点击下一页的时候当前页数的值就加1

$.each($("#"+tbodyId+" tr"),function(index,item){

var start = current_page* (current_num-1);//起始范围

var end = current_page * current_num;//结束范围

if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐

$(this).show();

}else {

$(this).hide();

}

});

}

});

//上一页方法

$("#"+tbodyId+"_prev").unbind("click");

$("#"+tbodyId+"_prev").click(function(){

if(current_num==1){

return false;

}else{

$("#"+tbodyId+"_current_page").text(--current_num);

$.each($("#"+tbodyId+" tr"),function(index,item){

var start = current_page* (current_num-1);//起始范围

var end = current_page * current_num;//结束范围

if(index >= start && index < end){//如果索引值是start和end之间的元素就显示，否则就隐藏

$(this).show();

}else {

$(this).hide();

}

});

}

})

$("#"+pageDiv+"").show();

}

页面引用css和js，加载完成数据后，

function fillTabl(){

......................

数据填充.............

..........................

pagiNation('maskPage','dialog-items',10); //传入div的id,tbody的id,还有分页数

}

效果如下：