> 웹 프론트엔드 > JS 튜토리얼 > js css_javascript 기술로 구현된 간단하고 사용하기 쉬우며 호환되는 페이징

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

WBOY
풀어 주다: 2016-05-16 17:05:57
원래의
1232명이 탐색했습니다.

효과:
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:



코드 복사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 ;
}
})

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿