이 기사에서는 JS Pagination 도구의 사용에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
JS 코드 부분 :
다음과 같이 코드를 복사하십시오 :/**
* Pagination JS
*/
var 페이지;
(기능(){
var page = {버전 : "1.0", 저자 : "liuxingmi"};
var showpage = 9;
page.navigation = function (divid, totalrecord, totalpage, currentpage, func) {
var nav = '<ul class =/"pagination/"title =/"pagination list/">';
Nav += '<li> 총 레코드 : <i id = "TotalRecord">' +TotalRecord +'</i> </li>';
nav + = '<li> 총 페이지 수 : <i id = "TotalPage">' + TotalPage + '</i> </li>';
nav + = '<li> 현재 페이지 : <b id = "pagenum">' + currentPage + '</b> </li>';
if (currentPage == 1) {
nav += '<li> <a href = "javaScript : void (0);" id = "FirstPage"> home </a> </li> ';
nav += '<li> <a href = "javaScript : void (0);" id = "FrontPage"> 이전 페이지 </a> </li> ';
} 또 다른 {
nav + = '<li> <a href = "JavaScript :' + func + '(1);" id = "FirstPage"> home </a> </li> ';
nav + = '<li> <a href = "javaScript :' + func + '(' + (currentPage -1) + ');" id = "FrontPage"> 이전 페이지 </a> </li> ';
}
nav += '<li id = "num"> <ol>';
var start = currentpage -math.floor (showpage/2);
var end = currentpage + math.floor (showpage/2);
if (end> totalpage) {
start- = (끝 - 총 페이지);
}
if (start <= 0) {
시작 = 1;
}
if (currentpage <showpage && end <showpage) {
END = SHOWPAGE;
}
if (end> totalpage) {
끝 = TotalPage;
}
for (var i = start; i <= end; i ++) {
if (i == currentPage) {
nav + = '<li> <a href = "javaScript :' + func + '(' + i + ');">' + i + '</a> </li>';
} 또 다른 {
nav + = '<li> <a href = "javaScript :' + func + '(' + i + ');">' + i + '</a> </li>';
}
}
nav += '</ol> </li>';
if (currentPage == TotalPage) {
nav += '<li> <a href = "javaScript : void (0);" id = "NextPage"> 마지막 페이지 </a> </li> ';
nav += '<li> <a href = "javaScript : void (0);" id = "lastpage"> 마지막 페이지 </a> </i> ';
} 또 다른 {
nav + = '<li> <a href = "javaScript :' + func + '(' + (currentPage + 1) + ');" id = "NextPage"> 마지막 페이지 </a> </li> ';
nav + = '<li> <a href = "JavaScript :' + func + '(' + TotalPage + ');" id = "lastpage"> 마지막 페이지 </a> </i> ';
}
nav += '</ul>';
$ ( "#" + divid) .html (nav);
};
this.page = page;
}) ();
CSS 부품 :
다음과 같이 코드를 복사하십시오 :/*페이지 스타일 시작*/
.쪽수 매기기{
오버플로 : 숨겨진;
여백 : 0 0 0 25px;
패딩 : 10px 10px 6px 150px;
테두리 : 1px 고체 #C8C8C8;
_zoom : 1;
텍스트 정렬 : 센터;
}
.Pagination *{
디스플레이 : 인라인;
플로트 : 왼쪽;
여백 : 0;
패딩 : 0;
글꼴 크기 : 12px;
}
.Pagination I {
플로트 : 없음;
패딩 권리 : 1px;
}
.currentpage b {
플로트 : 없음;
색상 :#F00;
}
.Pagination li {
목록 스타일 : 없음;
여백 : 0 5px;
}
.Pagination li li {
위치 : 상대;
여백 : -2px 0 0;
Font-Family : Arial, Helvetica, Sans-Serif
}
.firstpage a, .previouspage a, .nextpage a, .lastpage a {
오버플로 : 숨겨진;
높이 : 0;
텍스트 안정 : -9999EM;
테두리 : 8px Solid #fff;
국경-바닥 : 8px solid #fff;
}
.pagination li li a {
여백 : 0 1px;
패딩 : 0 4px;
국경 : 3px 더블 #ffff;
+국경 색상 : #eee;
배경 : #eee;
색상 :#06F;
텍스트 결정 : 없음;
}
.pagination li li a : 호버 {
배경 :#f60;
국경 색 : #ffff;
+국경 색상 :#f60;
색상 : #ffff;
}
li.firstpage {
마진 왼쪽 : 40px;
왼쪽 경계 : 3px 솔리드 #06f;
}
.firstpage a, .previouspage a {
경계 오른쪽 : 12px Solid #06F;
}
.firstpage A : 호버, .previouspage a : hover {
국경 오른쪽 색 : #f60;
}
.nextpage a, .lastpage a {
왼쪽 경계 : 12px 솔리드 #06f;
}
.nextpage a : 호버, .lastpage a : hover {
경계-왼쪽 색 :#f60;
}
.pagination li.lastpage {
경계 오른쪽 : 3px 솔리드 #06f;
}
.pagination li li. currentstate a {
위치 : 상대;
마진 : -1px 3px;
패딩 : 1px 4px;
국경 : 3px 더블 #ffff;
+국경 색상 :#f60;
배경 :#f60;
색상 : #ffff;
}
.pagination li.currentstate, .currentstate a, .currentstate a : hover {
국경 색 : #ffff #ccc;
커서 : 기본값;
}
/*Pagination Style Ends*/
통화 방법 :
코드 사본은 다음과 같습니다. page.navigation ( "pagenav", 100, 10, 1, "xxxlist");
<div id = "pagenav"> </div>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.