jQuery客户端分页

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

02
   <script type="text/javascript">

03
       var pageindex = 1;

04
       var pagesize = 2;

05
       $(function () {

06
           previous();

07
       })

08
       function previous() {

09
           if (pageindex < 1 || pageindex == 1) {

10
               pageindex = 1;

11
               $("#imgdiv img:lt(" + pagesize + ")").show();

12
               $("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();

13
           }

14
           else {

15
               pageindex--;

16
               if (pageindex != 1) {

17
                   $("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt("+ pagesize + ")").show();

18
                   $("#imgdiv img").not($("#imgdiv img:gt("+ ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();

19
               }

20
               if (pageindex == 1) {

21
                   $("#imgdiv img:lt(" + pagesize + ")").show();

22
                   $("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();

23
               }

24
           }

25
       }

26
       function next() {

27
           var p = $("#imgdiv img").length / pagesize;

28
 
29
           var pagecount = parseInt(Math.ceil(p));

30
 
31
           if (pageindex + 1 > pagecount) {

32
               pageindex = pagecount;

33
           } else {

34
               pageindex++;

35
           }

36
           $("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt("+ pagesize + ")").show();

37
           $("#imgdiv img").not($("#imgdiv img:gt("+ ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();

38
       }

39
   </script>

40
<div>

41
       <a href="javascript:previous()">上一页</a>

42
       <div id="imgdiv">

43
           <img src="/images/001.jpg" alt="第一页的第一张"/>

44
           <img src="/images/002.jpg" />

45
           <img src="/images/003.jpg" />

46
           <img src="/images/004.jpg" />

47
           <img src="/images/005.jpg"/>

48
       </div>

49
       <a href="javascript:next()">下一页</a>

50
   </div>