当前位置:编程学习 > JAVA >>

jQuery客户端分页

<script src="/js/jquery-1.4.1.js" type="text/javascript"></script> 
   <script type="text/javascript"> 
       var pageindex = 1; 
       var pagesize = 2; 
       $(function () { 
           previous(); 
       }) 
       function previous() { 
           if (pageindex < 1 || pageindex == 1) { 
               pageindex = 1; 
               $("#imgdiv img:lt(" + pagesize + ")").show(); 
               $("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide(); 
           } 
           else { 
               pageindex--; 
               if (pageindex != 1) { 
                   $("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show(); 
                   $("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide(); 
               } 
               if (pageindex == 1) { 
                   $("#imgdiv img:lt(" + pagesize + ")").show(); 
                   $("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide(); 
               } 
           } 
       } 
       function next() { 
           var p = $("#imgdiv img").length / pagesize; 
 
           var pagecount = parseInt(Math.ceil(p)); 
 
           if (pageindex + 1 > pagecount) { 
               pageindex = pagecount; 
           } else { 
               pageindex++; 
           } 
           $("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show(); 
           $("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide(); 
       } 
   </script> 
<div> 
       <a href="javascript:previous()">上一页</a> 
       <div id="imgdiv"> 
           <img src="/images/001.jpg" alt="第一页的第一张"/> 
           <img src="/images/002.jpg" /> 
           <img src="/images/003.jpg" /> 
           <img src="/images/004.jpg" /> 
           <img src="/images/005.jpg" />  
       </div> 
       <a href="javascript:next()">下一页</a> 
   </div> 

 


摘自 zhangjf20120224的专栏

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,