使用原生js实现前端分页功能

背景：

从后台提取出来数据，在前端进行分页。

代码：

user-manage.js

 

window.onload = function(){
    var result = {
        message : "get all users successfully",
        status: "success",
        data:[
             "1",
             "2",
             "3",
             "4",
             "5",
             "6",
             "7",
             "8",
             "9",
             "10",
             "11",
             "12",
             "13"
        ]
    };
    var currentPage = 1:
    var pageSize = 10;
    var count = result.data.length;
    var totalPage = Math.ceil(count / pageSize);
    pagination(result,currentPage,pageSize);
    function pagination(result,currentPage,pageSize){
        var initSerialNumber = new Array();
        for(var i = 0;i<result.data.length;i++){
            initSerialNumber[i] = i;
        }
        $("#current-page").text("当前第"+currentPage+"页");
        $("#total-page").text("共"+totalPage+"页");
        var us erNameContent = result.data.slice((currentPage-1)*pageSize,currentPage*pageSize);
        var serialNumberContent = initSerialNumber.slice((currentPage-1)*pageSize,currentPage*pageSize);
        var str = "";
        for(var i = 0;i < userNameContent.length;i++){\
             str +="<tr><td>"+(serialNumberContent[i]+1)+"</td><td>"+userNameContent[i]+"</td></tr>";
        $("#all-user").empty();

        $("#all-user").append(str);
        }
    $("#next-page").click(function(){
        if(currentPage!=totalPage){
            currentPage = currentPage+1;
            pagination(result,currentPage,pageSize);
        }
    });
    $("#previous-page").click(function{
        if(currentPage!=totalPage){
            currentPage = currentPage+1;
            pagination(result,currentPage,pageSize);
        }
    });
    $("#go").click(function(){
        var goPage = $("#go-page").val();
        if(goPage>=1 && goPage <= totalPage){
            currentPage = parseInt(goPage);
            pagination(result,currentPage,pageSize);
        }
    })
    }
}    

 

转载于:https://www.cnblogs.com/zhanzhuang/p/10308629.html