jQuery客户端分页代码

发布时间:2020-07-04编辑:脚本学堂
本文介绍了jquery实现客户端分页的例子,jquery 分页代码一例,有需要的朋友参考下。

例子,jquery分页代码。
 

复制代码 代码示例:

<script src="/js/jquery-1.4.2.js" type="text/javascript"></script>
   <script type="text/javascript">

       var pageindex = 1;

       var pagesize = 2;

       $(function () {

           previous();

       })
 //jquery 分页代码 上一页
       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();

               }

           }

       }
 //jquery 分页代码 下一页
       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>