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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM