jquery li ul 伪分页_使用jquery对数组进行分页,或者是对ul li中的数据进行隐藏显示...

这两天在做项目的时候用到了对数组进行分页,在网上搜索了一篇博客,是对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

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 = "

" + annexName + "";

$("#ul_model").append(msg);

}

})

ul id="ul_model">

上面已经将所有的数组分别插入到页面中,然后对其进行分页显示

$("#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();

}

});

}

})

1/

以上是我是先的全部代码。上面的功能主要就是通过隐藏也控制页面的现实。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值