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>
  • 相关阅读:
    Nginx禁止IP,只允许指定域名访问
    预防vsphere勒索病毒,适用于 ESXi 6.x 中的 OpenSLP 安全漏洞 (CVE-2019-5544) 的权宜措施 (76372)
    解决 vCenter root 密码过期无法登陆 User password expired
    停用Veritas Smart Meter-概念与操作
    centos7.0 没有netstat 和 ifconfig命令问题
    MAVEN剪除传递依赖
    Spring+SpringMVC+MyBatis+Maven框架整合
    CentOS7配置MongoDB
    利用mybatis-generator自动生成代码
    idea提交本地项目到git
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3668252.html
Copyright © 2011-2022 走看看