这两天在做项目的时候用到了对数组进行分页,在网上搜索了一篇博客,是对ul li 中的视频进行分页显示。减少了每次从数据库中读取数据的麻烦
下面先将以下将数组进行分页,
1.首先将说有的数组放在ul li 标签中
$(document).ready(function(){ var data=$("#annex").val(); var datas=data.split(","); var annex=''; var annexSub=''; var annexName=''; for(var i=0;i<datas.length;i++){ annex=datas[i]; annexName=annex.substring(0,annex.indexOf(".")); annexSub=annex.substring(annex.indexOf("."),annex.length); var filType=""; if(annexSub=='.doc'||annexSub=='.docx'){ filType="/FLMG/sysModel/image/doc.jpg"; }else if(annexSub=='.xls'||annexSub=='.xlsx'){ filType="/FLMG/sysModel/image/xls.jpg"; }else if(annexSub=='.zip'||annexSub=='.rar'){ filType="/FLMG/sysModel/image/zip.jpg"; }else if(annexSub=='.ppt'||annexSub=='.pptx'){ filType="/FLMG/sysModel/image/ppt.jpg"; }else if(annexSub=='.pdf'){ filType="/FLMG/sysModel/image/pdf.jpg"; } var msg = "<li><img src='"+filType+"' width="25" height="25" />" + annexName + "</li>"; $("#ul_model").append(msg); } })
ul id="ul_model">
</ul>
上面已经将所有的数组分别插入到页面中,然后对其进行分页显示
http://www.dayday28.com/post/2012-09-11/40039431075 此为我看到的博客,如果对下面的讲述不能理解。请看原文
$("#ul_model ul li:gt(3)").hide(); //初始化,前面4条数据显示,其他数据隐藏
var data=$("#annex").val();
var datas=data.split(",");
var total= datas.length; //总数据
// var total =$("#ul_model li").index()+1; 另一种计算ul 中li的总数的办法
var current_page=4; //每页显示的数据
var current_num=1; //当前页数
var total_page= Math.round(total/current_page);//总页数
var next=$(".next");//下一页
var prev=$(".prev");//上一页
$(".total").text(total_page);//显示总页数
$(".current_page").text(current_num);//当前的页数
//下一页
$(.next).click(function(){
if(current_num==7){
return false; //如果大于总的页数,就禁用下一页
}else{
$(".current_page").text(++current_num); //点击下一页时,当前页数加1
$.each($('#ul_model li'),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();
}
});
}
});
//上一页
$(".prev").click(function(){
if(current_num==1){
return false;
}else{
$(".current_page").text(--current_num);
$.each($('#ul_model li'),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();
}
});
}
})
<span class="page_box">
<a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a>
</span>
以上是我是先的全部代码。上面的功能主要就是通过隐藏也控制页面的现实。