使用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<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>

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