Simple, easy-to-use and compatible paging implemented by js css_javascript skills

Effect:

html:

Copy code The code is as follows:

Usage:

Copy code The code is as follows:

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

css:

Copy code The code is as follows:

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

Copy code The code is as follows:

function mcPaginate(){

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

actionName = actionName "?pageSize=" pageSize;


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

$pageDiv.append("pageNo "page/total" pageCount "page");

//Previous page
if(pageNo > 1) {
var hf = actionName "&pageNo=" (pageNo-1);
$pageDiv.append("" "上One page" "");
};

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

//Next page
if(pageNo < pageCount){
var hf = actionName "&pageNo=" (pageNo 1 );
$pageDiv.append("" "Next page" "");
} ;

$pageDiv.append("Go to" "page");

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