HTML页面:
<div class="panel_body form_group">
<table class="stripe">
<tbody id="providerContent">
</tbody>
</table>
<ul class="pagination" id="pagination">
</ul>
</div>
Ajax请求返回的数据:
JS代码:
/**
* @param pageTotal 总页数
* @param currentPage 当前页
* @param ulId 显示页码的ul的id值
* @param findPageFunctionName 分页查询的js方法名
*/
function showPage(pageTotal, currentPage, ulId, findPageFunctionName) {
var pagination = $("#"+ulId+"");
pagination.empty();
if (pageTotal > 7){
var current = currentPage-2;
var flag = true;
var firstPoint = false;
var lastPoint = true;
if (currentPage == 0){
pagination.append("<li class=\"disabled\"><span><i class=\"fa fa-angle-left\"></i></span></li>");
pagination.append("<li class=\"active\"><span>"+1+"</span></li>");
}else {
pagination.append("<li><a href=\"javascript:"+findPageFunctionName+"("+"'"+(currentPage-1)+"'"+");\"><i class=\"fa fa-angle-left\"></i></a></li>");
pagination.append("<li><a href=\"javascript:"+findPageFunctionName+"("+"'"+0+"'"+");\">"+1+"</a></li>");
}
if (currentPage>3){
pagination.append("<li class=\"disabled\"><span>...</span></li>");
firstPoint = true;
}
for (var i = 1; i < pageTotal-1; i++){
if (firstPoint){
if (currentPage >= pageTotal-2) {
if (flag){
if (currentPage == pageTotal-2) {
current -= 1;
}else {
current -= 2;
}
flag = false;
}
}
if (i >= current && currentPage+2 >= i){
if (i == currentPage){
pagination.append("<li class=\"active\"><span>"+(i+1)+"</span></li>");
}else {
pagination.append("<li><a href=\"javascript:"+findPageFunctionName+"("+"'"+i+"'"+");\">"+(i+1)+"</a></li>");
}
}
}else {
if (i == currentPage){
pagination.append("<li class=\"active\"><span>"+(i+1)+"</span></li>");
}else {
if (i < 5){
pagination.append("<li><a href=\"javascript:"+findPageFunctionName+"("+"'"+i+"'"+");\">"+(i+1)+"</a></li>");
}
}
}
}
if (currentPage+3 < pageTotal && currentPage+4 != pageTotal){
if (lastPoint){
pagination.append("<li class=\"disabled\"><span>...</span></li>");
lastPoint = false;
}
}
if (pageTotal != 1) {
if (currentPage == pageTotal-1){
pagination.append("<li class=\"active\"><span>"+pageTotal+"</span></li>");
}else {
pagination.append("<li><a href=\"javascript:"+findPageFunctionName+"("+"'"+(pageTotal-1)+"'"+");\">"+pageTotal+"</a></li>");
}
}
if (currentPage == pageTotal-1){
pagination.append("<li class=\"disabled\"><span><i class=\"fa fa-angle-right\"></i></span></li>");
}else {
pagination.append("<li><a href=\"javascript:"+findPageFunctionName+"("+"'"+(currentPage+1)+"'"+");\"><i class=\"fa fa-angle-right\"></i></a></li>");
}
}else {
if (currentPage == 0){
pagination.append("<li class=\"disabled\"><span><i class=\"fa fa-angle-left\"></i></span></li>");
}else {
pagination.append("<li><a href=\"javascript:"+findPageFunctionName+"("+"'"+(currentPage-1)+"'"+");\"><i class=\"fa fa-angle-left\"></i></a></li>");
}
for (var i = 0; i < pageTotal; i++){
if (currentPage == i){
pagination.append("<li class=\"active\"><span>"+(i+1)+"</span></li>");
}else {
pagination.append("<li><a href=\"javascript:"+findPageFunctionName+"("+"'"+i+"'"+");\">"+(i+1)+"</a></li>");
}
}
if (currentPage == pageTotal-1){
pagination.append("<li class=\"disabled\"><span><i class=\"fa fa-angle-right\"></i></span></li>");
}else {
pagination.append("<li><a href=\"javascript:"+findPageFunctionName+"("+"'"+(currentPage+1)+"'"+");\"><i class=\"fa fa-angle-right\"></i></a></li>");
}
}
}
实现效果(为了实现这个效果,我已经不择手段了):
当页数不超过7页时
当页码超过7页时