zoukankan      html  css  js  c++  java
  • jquery拆分数组,按分页输出

    以下是全部代码,实现点击上一页和下一页输出分页内容:

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>jquery拆分数组,按分页输出</title>
    <script src="js/jquery.min.js"></script>
    <script>
    $(function() {
    
    var a = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10','11'];
    
    var clickCount = 0;
    var pageNum = 3;
    var aa= a.slice(0,pageNum);
    
    for (var i = 0; i < aa.length; i++) {
        var temps = "";
        temps += "<li>"+ aa[i] + "</li>";
        $("ul").append(temps);
    }
    
    $("#button1").click(function() {
         clickCount++;
         console.log("button1",clickCount);
         if((clickCount * 3) < a.length) {
            var temp = "";
            for (var i = clickCount * 3; i < 3 * (clickCount + 1); i++) {
                if (i < a.length){
                    temp += "<li>"+ a[i] + "</li>";
                }
            }
            $(this).next().next().empty();
            $(this).next().next().append(temp);
            temp = temp.substr(0, temp.length - 1);
        }
    });
    $("#button2").click(function() {
        clickCount--;
        console.log("button2",clickCount);
         if((clickCount * 3) < a.length) {
            var temp = "";
            for (var i = clickCount * 3; i < 3 * (clickCount + 1); i++) {
                if (i < a.length){
                    temp += "<li>"+ a[i] + "</li>";
                }
            }
            $(this).next().empty();
            $(this).next().append(temp);
            temp = temp.substr(0, temp.length - 1);        
        }
    });
    });
    </script>
    </head>
    <body>
    
    
    <button id="button1">aaa</button>
    <button id="button2">bbb</button>
    
    <ul>
    
    </ul>
    
    </body>
    </html>
  • 相关阅读:
    【Rust】元组display
    【Rust】原始类型布尔
    【Rust】原始类型浮点
    【Rust】元组transpose
    【Rust】结构体
    【Rust】原始类型数组
    【Rust】结构体square
    【Rust】结构体area
    1月12日 家庭小账本(改) 开发记录
    1月18日 学习记录
  • 原文地址:https://www.cnblogs.com/smedas/p/12867594.html
Copyright © 2011-2022 走看看