js+css实现的简单易用兼容好的分页

174 阅读 0 评论 115 点赞

我是靠谱客的博主英俊康乃馨，最近开发中收集的这篇文章主要介绍js+css实现的简单易用兼容好的分页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果：

html:

复制代码代码如下:

用法：

复制代码代码如下:

 
var total = 310; 
var pageNo = 1; 
var pageCount = 31;//共有多少页 
var pageSize = 10; 
var actionName = "list.action"; 
var otherParam = "&name='www'&order='time'"; 
$(function(){ 
paginate();//分页} 
); 

css:

复制代码代码如下:

 
#page{ 
font-size: 14px; 
clear: both; 
padding-top: 1.45em; 
white-space: nowrap; 
} 
#page a{ 
background: white; 
border: 1px solid #E7ECF0; 
display: inline-block; 
height: 22px; 
line-height: 22px; 
margin-right: 5px; 
text-align: center; 
text-decoration: none; 
vertical-align: middle; 
width: 23px; 
} 
#pagePre,#pageNext{ 

} 
.pageCurrent{ 
font-weight: bold; 
} 

js:

复制代码代码如下:

 
function mcPaginate(){ 

var $pageDiv = $("#page"); 

actionName = actionName + "?pageSize="+pageSize; 


if(typeof otherParam != 'undefined' && otherParam != ""){ 
actionName = actionName + otherParam; 
} 

$pageDiv.append("第"+pageNo+"页/共"+pageCount+"页"); 

//上一页 
if(pageNo > 1){ 
var hf = actionName + "&pageNo="+(pageNo-1); 
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"上一页"+"</a>"); 
}; 

if(pageCount <= pageSize){ 
for(var i=0; i < pageCount; i++){ 
var hf = actionName + "&pageNo="+(i+1); 
if(pageNo == (i+1)){//当前页 
$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+pageNo+"</a>"); 
}else{ 
$pageDiv.append("<a href='"+hf+"'>"+(i+1)+"</a>"); 
}; 
}; 
}else{ 
for(var i=0; i < pageSize; i++){ 
var midIndex = 0; 
if(pageSize%2 == 0){ 
midIndex = pageSize/2 - 1; 
}else{ 
midIndex = pageSize/2; 
} 
var num = -midIndex; 
var showPageNum = pageNo+i+num; 


if(showPageNum > 0 && showPageNum <= pageCount){ 

var hf = actionName + "&pageNo="+showPageNum; 
if(pageNo == showPageNum){//当前页 
$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+showPageNum+"</a>"); 
}else{ 
$pageDiv.append("<a href='"+hf+"'>"+showPageNum+"</a>"); 
}; 
}; 
}; 
} 

//下一页 
if(pageNo < pageCount){ 
var hf = actionName + "&pageNo="+(pageNo+1); 
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"下一页"+"</a>"); 
}; 

$pageDiv.append("转到"+"<input type='text' class='goNum' style='width:30px;' name='goNum'>页<input type='button' name='goButton' class='goButton' value='确定'>"); 

$(".goButton").click(function(){ 
var goNum = $(".goNum").val(); 
if(goNum!=""){ 
window.location.href = actionName + "&pageNo="+goNum; 
} 
}); 
}; 