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>
  • 相关阅读:
    去除ArrayList中重复自定义对象元素
    ArrayList去除集合中字符串的重复值(字符串的内容相同)
    java-前端之css
    java-前端之HTML
    java-JDBC
    java-JDBC
    Oracle-视图,约束
    Oracle-查询,,..
    Oracle-查询
    Oracle-查询之函数
  • 原文地址:https://www.cnblogs.com/smedas/p/12867594.html
Copyright © 2011-2022 走看看