zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    阿米巴
    linux系统和依赖包常用下载地址
    chm格式文件能打开,但看不到内容问题
    云计算的三层SPI模型
    云计算相关的一些概念Baas、Saas、Iaas、Paas
    IOS 开发环境,证书和授权文件等详解
    Android MDM参考
    理解RESTful架构
    联想小新Air2020锐龙版在Ubuntu下添加指纹识别
    避免踩坑,这才是为知笔记导入印象笔记数据的正确姿势
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3668252.html
Copyright © 2011-2022 走看看