js前端分页

第一种方法

/**
*分页函数
*@totalpage 总页数
*@currpage 当前页数
**/
function setNavPages(totalpage, curpage) {
    totalpage = Number(totalpage);
    curpage = Number(curpage);
    if (totalpage == 1 || totalpage == 0)
        return "";
    var html = "<ul class=\"pagination\">";
    if (curpage > 0) {
        html += "<li><a href=\"javascript:;\" aria-label=\"Previous\" data-rel=\"" + (curpage - 1) + "\"><span aria-hidden=\"true\">«</span></a></li>";
    } else {
        html += "<li class=\"disabled\"><span aria-hidden=\"true\">«</span></li>";
    }
    if (curpage > 4) {
        html += "<li><span>…</span></li>";
    }
    for (var i = curpage - 4; i < curpage + 5 && i < totalpage; i++) {
        if (i < 0)
            continue;
        var k = i + 1;
        if (i == curpage) {
            html += "<li class=\"active\"><a href=\"javascript:;\" data-rel=\"" + i + "\">" + k + "<span class=\"sr-only\">(current)</span></a></li>";
        } else {
            html += "<li><a href=\"javascript:;\" data-rel=\"" + i + "\">" + k + "</a></li>"
        }
    }
    if (totalpage > (curpage + 5)) {
        html += "<li><span class='pagebardot'>...</span></li>";
    }
    if (totalpage > (curpage + 5)) {
        html += "<li><a href=\"javascript:;\" data-rel=\"" + (totalpage - 1) + "\">" + totalpage + "</a></li>";
    }
    if (curpage < totalpage - 1) {
        html += "<li><a href=\"javascript:;\" aria-label=\"Next\" data-rel=\"" + (curpage + 1) + "\"><span aria-hidden=\"true\">»</span></a></li>";
    }
    html += "</ul>";
    return html;
}

调用

html代码

        <div id="navpage" style="text-align:center;"></div>

js代码

 $(function () { 
$("#navpage").on("click", "a", function (event, state) {
                page = $(this).attr("data-rel");
                showinfo(page);
            });
}）
function showinfo（page）{
var html = setNavPages(Math.ceil(data.length / 4), page);
                $("#navpage").html(html);
//调用数据略
}

第二种方法是采用url中传递参数的方法

/**
 * 分页
 * @totalpage 总页数
 * @curpage 当前页数
 * @url 当前网址
 */
function setNavPages(totalpage, curpage,url) {
    totalpage = Number(totalpage);
    curpage = Number(curpage);
    if (url.indexOf('?') > 0) {
        url = url + "&page=";
    } else {
        url = url + "?page=";
    }
    if (totalpage == 1 || totalpage == 0)
        return "";
    var html = "<ul class=\"pagination\">";
    if (curpage > 0) {
        html += "<li><a href='"+url+(curpage)+"' aria-label=\"Previous\" data-rel=\"" + (curpage - 1) + "\"><span aria-hidden=\"true\">«</span></a></li>";
    } else {
        html += "<li class=\"disabled\"><span aria-hidden=\"true\">«</span></li>";
    }
    if (curpage > 4) {
        html += "<li><span>…</span></li>";
    }
    for (var i = curpage - 4; i < curpage + 5 && i < totalpage; i++) {
        if (i < 0)
            continue;
        var k = i + 1;
        if (i == curpage) {
            html += "<li class=\"active\"><a href='"+url+k+"' data-rel=\"" + i + "\">" + k + "<span class=\"sr-only\">(current)</span></a></li>";
        } else {
            html += "<li><a href='" + url + k + "' data-rel=\"" + i + "\">" + k + "</a></li>"
        }
    }
    if (totalpage > (curpage + 5)) {
        html += "<li><span class='pagebardot'>...</span></li>";
    }
    if (totalpage > (curpage + 5)) {
        html += "<li><a href='" + url + (totalpage) + "' data-rel=\"" + (totalpage - 1) + "\">" + totalpage + "</a></li>";
    }
    if (curpage < totalpage - 1) {
        html += "<li><a href='" + url + (curpage) + "' aria-label=\"Next\" data-rel=\"" + (curpage + 1) + "\"><span aria-hidden=\"true\">»</span></a></li>";
    }
    html += "</ul>";
    return html;
}

调用

html代码

        <div id="navpage" style="text-align:center;"></div>

js代码

 $(function () { 

//data是传入的数据
var html = setNavPages(Math.ceil(data.length / 4), page);
                $("#navpage").html(html);
//调用数据略
}