Js + CSS implementation of easy to use compatible good pagination

Effect:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/20131230160016.jpeg? 2013113016043 ">  
HTML:

 
<div id="page"></div> 

Usage:

 
var total = 310; 
var pageNo = 1; 
var pageCount = 31;//How many pages
var pageSize = 10; 
var actionName = "list.action"; 
var otherParam = "&name='www'&order='time'"; 
$(function(){ 
paginate();//Paging}
); 

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(" The first "+pageNo+" page / A total of "+pageCount+" page "); 

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

if(pageCount <= pageSize){ 
for(var i=0; i < pageCount; i++){ 
var hf = actionName + "&pageNo="+(i+1); 
if(pageNo == (i+1)){//The current page
$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){//The current page
$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+showPageNum+"</a>"); 
}else{ 
$pageDiv.append("<a href='"+hf+"'>"+showPageNum+"</a>"); 
}; 
}; 
}; 
} 

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

$pageDiv.append(" Go to the "+"<input type='text' class='goNum' style='width:30px;' name='goNum'> page <input type='button' name='goButton' class='goButton' value=' determine '>"); 

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