js+css實(shí)現(xiàn)的簡單易用兼容好的分頁

更新時間：2013年12月30日 16:01:26 作者：

使用html、js、css實(shí)現(xiàn)的簡單易用兼容好的分頁，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下

效果：

html:

復(fù)制代碼代碼如下:

用法：

復(fù)制代碼代碼如下:

 
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:

復(fù)制代碼代碼如下:

 
#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:

復(fù)制代碼代碼如下:

 
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)){//當(dāng)前頁 
$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){//當(dāng)前頁 
$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("轉(zhuǎn)到"+"<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; 
} 
}); 
}; 