纯前端Jquery分页

**前台ajax请求数据，纯前台分页，不用框架。
**

/**
 * prev Page
 * @param {Object} currentPage
 */
function prevPage(currentPage) {
    var str = "";
    //countPage
    var total = (arr.length % 5) == 0 ? arr.length / 5 : Math.ceil(arr.length / 5); 
    //The current page is less than 1 buttons to make ash
    if(currentPage < 1) {
        $("#prevPage").css("background-color", "#C0C0C0");
        return;
    }
    //Data rendering
    for(var i = currentPage * 5-5; i < currentPage * 5 && i < arr.length ; i++) {
        var color="";
        if(arr[i].color == "1") {
                color = "monochrom";
        } else {
                color = "colour";
        }
        //DateFormat
        var sizeLength=arr[i].createTime;
        var oTime=getMyDate(parseInt(sizeLength.substring(0,sizeLength.length)));
        str+=" onclick='onFocus(this,"+(i)+")'><td>"+arr[i].jobTitle+"td><td>"+oTime+"td><td>"+color+"td><td>"+arr[i].paperSize+"/"+arr[i].copies+"td><td>"+arr[i].jobStatus+"td>tr>";
    }
    $("tbody").html(str);
    $("tfoot").html(
        "<tr><td colspan='5'><button id='prevPage' style='width: 110px;background-color: #0098DF;color: #FFFFFF;' onclick='prevPage(" + (currentPage - 1) + ")'><span style='float: right;text-align: center;font-size:20px;'>span><li class='layui-icon' style='font-size: 20px;'>li>button><input type='button' id='currentPage' value='" + currentPage + "/" + total + "' style='font-size: 20px;border: 0px;background-color:#f2f2f2 ;'><button id='nextPage' style='width: 110px;background-color: #0098DF;color: #FFFFFF;' onclick='nextPage(" + (currentPage + 1) + ")'><span style='float: left;text-align: center;font-size:20px;'>span><li class='layui-icon' style='font-size: 20px;'>li>button>td>tr>");

    if(currentPage == 1) {
        $("#prevPage").css("background-color", "#C0C0C0");
    }
}
/**
 * next Page
 * @param {Object} currentPage
 */
function nextPage(currentPage) {
    var str = "";
    //countPage
    var total = (arr.length % 5) == 0 ? arr.length / 5 : Math.ceil(arr.length / 5); 
    //The current page is greater than or equal to the total number of pages.
    if(currentPage > total) {
        $("#nextPage").css("background-color", "#C0C0C0");
        return;
    }
    //Data rendering
    for(var i = currentPage * 5 - 5; i < currentPage * 5 && i < arr.length; i++) {
        var color="";
        if(arr[i].color == "1") {
                color = "monochrom";
        } else {
                color = "colour";
        }
        //DateFormat
        var sizeLength=arr[i].createTime;
        var oTime=getMyDate(parseInt(sizeLength.substring(0,sizeLength.length)));
        str+=" onclick='onFocus(this,"+(i)+")'><td>"+arr[i].jobTitle+"td><td>"+oTime+"td><td>"+color+"td><td>"+arr[i].paperSize+"/"+arr[i].copies+"td><td>"+arr[i].jobStatus+"td>tr>";
    }
    $("tbody").html(str);
    $("tfoot").html(
        "<tr><td colspan='5'><button id='prevPage' style='width: 110px;background-color: #0098DF;color: #FFFFFF;' onclick='prevPage(" + (currentPage - 1) + ")'><span style='float: right;text-align: center;font-size:20px;'>span><li class='layui-icon' style='font-size: 20px;'>li>button><input type='button' id='currentPage' value='" + currentPage + "/" + total + "' style='font-size: 20px;border: 0px;background-color:#f2f2f2 ;'><button id='nextPage' style='width: 110px;background-color: #0098DF;color: #FFFFFF;' onclick='nextPage(" + (currentPage + 1) + ")'><span style='float: left;text-align: center;font-size:20px;'>span><li class='layui-icon' style='font-size: 20px;'>li>button>td>tr>");

    if(currentPage >= total) {
        $("#nextPage").css("background-color", "#C0C0C0");
    }
}