第一种方法
/**
*分页函数
*@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);
//调用数据略
}