직접 작성된 간단한 페이징 구성 요소 인 주요 기능과 구현은 모두 JS에 있습니다. PAGING을 생성하고 컨테이너의 ID를 제공하기 위해 페이지를 배치하려면 DIV 만 추가하십시오.
HTML 구조는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<ul id = "pagediv">
</ul>
클래스 = "Pagination"은 Pagination 스타일을 제공하고
id = "pagediv"는 JS 생성 페이지 매김을 배치하는 데 사용됩니다
CSS 구조는 다음과 같습니다.
코드 사본은 다음과 같습니다.
.쪽수 매기기{
마진-탑 : 10px;
마진 바닥 : 10px;
디스플레이 : 인라인 블록;
왼쪽 패딩 : 0;
여백 : 20px 0;
Border-Radius : 4px;
}
.Pagination> li {
디스플레이 : 인라인;
}
.Pagination> li : First-Child> a {
왼쪽 마진 : 0;
국경-왼쪽-라디우스 : 4px;
국경-바닥-왼쪽 라디우스 : 4px;
}
.pagination> li> a {
위치 : 상대;
플로트 : 왼쪽;
패딩 : 6px 12px;
마진 왼쪽 : -1px;
라인 높이 : 1.42857143;
색상 : #337AB7;
텍스트 결정 : 없음;
배경색 : #fff;
국경 : 1px Solid #ddd;
커서 : 포인터;
}
.pagination> li> a.navcur {
배경 : #CCCCCCC;
색상 : #ffffff;
}
다음은 JS 구조입니다. jQuery를 참조하십시오.
코드 사본은 다음과 같습니다.
/**
* @pagecontentid 페이지의 div 요소를 렌더링합니다
* @curpage 현재 시작 페이지
* @TotalCount 총 번호
* @pagerows 페이지 당 디스플레이 수
* @callback 데이터를 표시하는 콜백 함수입니다
*/
기능 pagelist (pagecontentid, 옵션) {
this.pagecontentId = document.getElementById (pagecontentId);
this.curpage = 옵션 .curpage;
this.totalCount = Option.TotalCount;
this.pagerows = 옵션 .pagerows;
this.callback = 옵션 .callback;
this.pagesize = math.ceil (this.totalcount/this.pagerows);
}
Pagelist.prototype = {
init : function () {
this.renderbtn ();
},
FirstPage : function () {
var _self = this;
_self._firstpage = document.createElement ( "li");
_self._firstpagea = document.createElement ( "a");
_self._firstpagea.innerhtml = "홈페이지";
_self._firstpage.appendChild (_self._firstpagea);
this.pagecontentid.appendChild (_self._firstpage);
_self._firstpage.onclick = function () {
_self.gotopage (1);
}
},
마지막 페이지 : function () {
var _self = this;
_self._lastpage = document.createElement ( "li");
_self._lastpagea = document.createElement ( "a");
_self._lastpagea.innerhtml = "마지막 페이지";
_self._lastpage.appendChild (_self._LASTPAGEA);
this.pagecontentid.appendChild (_self._LASTPAGE);
_self._LASTPAGE.onClick = function () {
_self.gotopage (_self.pagesize);
}
},
putpage : function () {
var _self = this;
_self._prew = document.createElement ( "li");
_self._prewa = document.createElement ( "a");
_self._prewa.innerhtml = "<<";
_self._prew.appendChild (_self._prewa);
this.pagecontentid.appendChild (_self._prew);
_self._prew.onclick = function () {
if (_self.curpage> 1) {
_self.curpage-;
}
_self.callback.call (this, this.curpage);
_self.init ();
Console.log (_self.curpage);
}
},
NextPage : function () {
var _self = this;
_self._next = document.createElement ( "li");
_self._nexta = document.createElement ( "a");
_self._nexta.innerhtml = ">>";
_self._next.appendChild (_self._nexta);
this.pagecontentid.appendChild (_self._next);
_self._next.onclick = function () {
if (_self.curpage <_self.pagesize) {
_self.curpage ++;
}
_self.callback.call (this, this.curpage);
_self.init ();
Console.log (_self.curpage);
}
},
pagenum : function () {
var _self = this;
if (this.pagesize <= 10) {
for (var i = 1, len = this.pagesize; i <= len; i ++) {
_self._num = document.createElement ( "li");
_self._numa = document.createElement ( "a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pagecontentid.appendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (Curpage);
}
}
}
또 다른{
if (_self.curpage <= 10) {
for (var i = 1; i <= 10; i ++) {
_self._num = document.createElement ( "li");
_self._numa = document.createElement ( "a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pagecontentid.appendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (Curpage);
}
}
}
else if (_self.curpage> 10 && _ self.curpage <= this.pagesize) {
if (this.pagesize <math.ceil (_self.curpage/10)*10) {
for (var i = math.floor (_self.curpage/10)*10+1; i <= this.pagesize; i ++) {
if (_self.curpage> this.pagesize)
반품;
_self._num = document.createElement ( "li");
_self._numa = document.createElement ( "a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pagecontentid.appendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (Curpage);
}
}
}또 다른{
if (math.ceil (_self.curpage/10)*10 == _ self.curpage) {
for (var i = _self.curpage-9; i <= _ self.curpage; i ++) {
_self._num = document.createElement ( "li");
_self._numa = document.createElement ( "a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pagecontentid.appendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (Curpage);
}
}
}또 다른{
for (var i = math.floor (_self.curpage/10)*10+1; i <= math.ceil (_self.curpage/10)*10; i ++) {
_self._num = document.createElement ( "li");
_self._numa = document.createElement ( "a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pagecontentid.appendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (Curpage);
}
}
}
}
}
}
$ ( ". Pagination Li"). 각 (function () {
if ($ (this) [0] .innerText == _ self.curpage) {
$ ( ". Pagination Li"). Children ( "A"). RemoveClass ( "Navcur");
$ (this) .children ( "a"). addClass ( "navcur");
}
});
},
getOpage : function (Curpage) {
this.curpage = Curpage;
this.callback.call (this, this.curpage);
this.init ();
Console.log (this.curpage);
},
renderbtn : function () {
$ ( ". Pagination"). html ( "");
this.firstpage ();
this.prewpage ();
this.pagenum ();
this.nextPage ();
this.lastpage ();
}
};
$ (function () {
var pager = 새로운 Pagelist ( "pagediv", {
CUPAGE : 1,
TotalCount : 26,
PageRows : 1,
콜백 : CallbackFuc
});
Pager.init ();
});
함수 callbackfuc (Curpage) {
}
설명 :
이 페이지는 10 페이지를 기반으로합니다. 10 페이지 미만이면 모든 페이지가 표시됩니다. 페이지가 10 페이지보다 크면 나머지 페이지가 표시되도록 페이지가 표시됩니다.
통화 방법 :
코드 사본은 다음과 같습니다.
$ (function () {
var pager = 새로운 Pagelist ( "pagediv", {
CUPAGE : 1,
TotalCount : 26,
PageRows : 1,
콜백 : CallbackFuc
});
Pager.init ();
});
위는이 페이징 구성 요소의 핵심 코드입니다. 나는 당신이 그것을 좋아할 수 있기를 바랍니다.