样式基于bootstrap
<ul class="pagination" data-page="1">
<li id="sortTable_previous">
<a href="javascript:void(0);" data-type="left">
<span class="icon font_family icon-jiantou"></span>
</a>
</li>
<li class="pagelist">
</li>
<li id="sortTable_next">
<a href="javascript:void(0);" data-type="right">
<span class="icon font_family icon-jiantou"></span>
</a>
</li>
</ul>
//总数据,当前页数,一页显示几条数据
showPage(totalPage, pageIndex, pageSize);//显示分页
$(".pagination").attr("data-pageIndex",pageIndex);
if (data.itemCount == 0) {
$(".pagination").hide();
} else {
$(".pagination").show();
}
//分页方法
function showPage(totalPage, pageIndex, pageSize) {
var _LENGTH = 5; //最大页数5
var pageArr = []; //按钮数组
if (totalPage % pageSize == 0) { //整页
pageAll = totalPage / pageSize; //页数
} else { //非整页
pageAll = (totalPage - totalPage % pageSize) / pageSize + 1;
}
//总页数小于5页
if (pageAll <= _LENGTH) {
for (var i = 0; i < pageAll; i++) {
pageArr[i] = i + 1;
}
} else { //总页数大于5页
if (pageIndex + 2 <= pageAll && pageIndex - 2 > 0) { //当前页没有超过总页数
for (var i = 0; i < _LENGTH; i++) {
pageArr[i] = pageIndex - 2 + i;
}
} else if (pageIndex <= 2) {
pageArr = [1, 2, 3, 4, 5];
} else {
for (var i = 0; i < _LENGTH; i++) {
pageArr[i] = pageAll - 4 + i;
}
}
}
$(".pagination").attr("data-pageAll", pageAll); //获取总页数
//绘制页面
drawPage(pageArr, pageIndex, pageAll);
}
//绘制分页dom方法
function drawPage(pageArr, pageIndex, pageAll) {
$(".pagination li,.pagination li a").removeClass("disabled");
if(pageIndex == 1){ //禁用上一页
$("#sortTable_previous,#sortTable_previous a").addClass("disabled");
}else if(pageIndex == pageAll){ //禁用下一页
$("#sortTable_next,#sortTable_next a").addClass("disabled");
}
var _html = "";
for (var i = 0; i < pageArr.length; i++) {
if (pageArr[i] == pageIndex) {
_html += '<a class="paginate_button active" href="javascript:void(0);" data-type="list">' + pageArr[i] + '</a>';
$(".pagination").attr("data-pageIndex", pageIndex);
}else{
_html += '<a class="paginate_button" href="javascript:void(0);" data-type="list">' + pageArr[i] + '</a>';
}
}
$(".pagelist").html(_html);
}
/*分页*/
$(".pagination").on("click", "a", function () {
if($(this).hasClass("disabled")) return;
var text = $(this).text(); //获取当前点击页数
var type = $(this).attr("data-type"); //获取当前点击类型
var pageIndex = $(".pagination").attr("data-pageIndex");
if (type == "left") { //如果是点击的上一页
if (pageIndex > 1) {
pageIndex--;
}
} else if (type == "right") { //如果是点击的下一页
if (pageIndex < pageAll) {
pageIndex++;
}
} else {
pageIndex = parseInt(text); //将获取的页数转化成数字
}
dataAjax(pageIndex);
});