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>
原文地址:https://www.cnblogs.com/smedas/p/12867594.html