js css_javascript 기술로 구현된 간단하고 사용하기 쉬우며 호환되는 페이징

효과:

html:

코드 복사 코드는 다음과 같습니다.

사용법:

코드 복사 코드는 다음과 같습니다.

var total = 310;
var pageNo = 1;
var pageCount = 31; total?
var pageSize = 10;
var actionName = "list.action"
var otherParam = "&name='www'&order='time'";
paginate();//pagination}
)

css:

코드 복사 코드는 다음과 같습니다:

#page{
font-size: 14px;
clear: 모두
padding-top: 1.45em; 공백: nowrap
}
# 페이지{
배경: 흰색
테두리: 1px 솔리드 #E7ECF0;
높이: 22px;
줄 높이: 22px;
여백-오른쪽:
텍스트 정렬: 중앙
텍스트 장식: 없음
세로 정렬: 중간; 23px;
}
#pagePre,#pageNext {

}
.pageCurrent{
font-weight:
}


js:

코드 복사

코드는 다음과 같습니다. function mcPaginate(){

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

actionName = actionName "?pageSize=" pageSize


if(typeof otherParam != '정의되지 않음' && otherParam != ""){
actionName = actionName otherParam;

$pageDiv.append("pageNo "page/total" pageCount "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)){//현재 페이지
$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; >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("" showPageNum "< ;/a>");
}else{
$pageDiv.append("" showPageNum "");
};
}

//다음 페이지
if(pageNo < pageCount); 🎜>var hf = actionName "&pageNo=" (pageNo 1 );
$pageDiv.append("" "다음 페이지" " ");
} ;

$pageDiv.append("이동" "page");

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