프런트엔드 페이징 컨트롤이 많이 있습니다. 여기서는 jquery를 기반으로 하는 페이징 컨트롤 pagination.js 버전을 공유합니다.
먼저 미리보기를 살펴보겠습니다.
기본적으로 페이지 번호를 클릭하면 블로그 파크와 마찬가지로 URL 뒤에 "#p 페이지 번호"가 추가됩니다.
컨트롤에는 주의가 필요한 2개의 매개변수가 있습니다.
1. beforeRender: 각 페이지 번호 항목이 렌더링되기 전에 호출되며 매개변수는 페이지 번호의 jQuery 객체입니다. 이때 우리는 렌더링하기 전에 자체 속성을 추가하는 등의 일부 처리를 수행할 수 있습니다. 기본적으로 페이지 번호를 클릭하면 URL 뒤에 "#p 페이지 번호"가 추가됩니다. 이러한 URL은 페이지를 새로 고치지 않습니다. 예를 들어 URL이 "default.aspx?index=page number"인 경우 페이지를 새로 고쳐야 하는 경우 이 콜백 함수에서 이를 처리할 수 있습니다.
2. 콜백: 페이지 번호를 클릭하면 매개변수가 전체 옵션입니다. 페이지 번호를 클릭하면 Ajax 요청이 시작되지 않으며 직접 처리해야 합니다. options.index는 이번에 클릭한 페이지 번호입니다. 때로는 총 개수가 변경될 수 있으며 콜백이 옵션 매개변수를 반환할 수 있습니다. 여기서는 총 개수만 재설정한 다음 반환하면 됩니다.
호출 예시를 보시면 이해하실 수 있습니다.
소스코드:
/*分页控件v1.0
date:2015.08.26
*/
(function(window,$){
$.fn.pagination = function(options){
var _dftOpts = {
count:0,//总数
size:10,//每页数量
index:1,//当前页
lrCount:5,//当前页左右最多显示的数量
lCount:0,//最开始预留的数量
rCount:0,//最后预留的数量
first:"首页",
last:"尾页",
before:"上一页",
next:"下一页",
callback:null,//点击事件
beforeRender:null//项呈现前
};
$.extend(_dftOpts,options);
var count = _dftOpts.count;
if(count <= 0) return;
var _ellipsis = "...";
var _size = _dftOpts.size > 0 ? (_dftOpts.size > count ? count : _dftOpts.size) : 1;
var _page = Math.ceil(count / _size);
var _index = _dftOpts.index > 0 ? (_dftOpts.index > _page ? _page : _dftOpts.index) : 1;
var _lrcount = _dftOpts.lrCount * 2 + 1 > _page ? parseInt((_page - 1) / 2) : _dftOpts.lrCount;
var _continueCount = _lrcount * 2 + 1;
var _lCount = _dftOpts.lCount <= 0 ? 0 : (_dftOpts.lCount > _page ? _page - 1 : _dftOpts.lCount);
var _rCount = _dftOpts.rCount <= 0 ? 0 : (_dftOpts.rCount > _page ? _page - 1 : _dftOpts.rCount);
var _first = _dftOpts.first;
var _before = _dftOpts.before;
var _last = _dftOpts.last;
var _next = _dftOpts.next;
var _FromTo;
var _url = location.pathname + location.search + "#p";
var jthis = this;
var jPager = $("<div>",{"class":"pager"});
initJPager();
jthis.append(jPager);
regisiterEvent();
return jthis;
/*function*/
function initJPager(){
_FromTo = GetFromTo();
var from = _FromTo.from;
var to = _FromTo.to;
var before = _index <= 1 ? 1 : _index - 1;
var next = _index >= _page ? _page : _index + 1;
var beforeLast = _page - 1;
var jPrevs,jNexts;
var i;
//前
if(from === 2 && _lCount > 0){
appendLink(1);
}else if(from > _lCount + 1){
for(i = 0;i < _lCount;i++){
appendLink(i + 1);
}
if(_lCount > 0){
appendEllipsis();
}
}else{
for(i = 1;i < from;i++){
appendLink(i);
}
}
//连续部分
for(i = from;i <= to;i++){
if(i === _index){
appendLink(i,true);
}else{
appendLink(i);
}
}
//后
if(to === beforeLast && _rCount > 0){
appendLink(_page);
}else if(to < _page - _rCount){
if(_rCount > 0){
appendEllipsis();
}
for(i = _page - _rCount;i < _page;i++){
appendLink(i + 1);
}
}else{
for(i = to;i < _page;i++){
appendLink(i + 1);
}
}
appendFirstAndLast();
}
function GetFromTo(){
var from,to;
from = _index - _lrcount;
if(from <= 1){
return {from:1,to:_continueCount};
}
if(_page - _index < _lrcount){
from = _page - _continueCount + 1;
return {from:from,to:_page};
}
to = _index + _lrcount;
to = to > _page ? _page : to;
return {from:from,to:to};
}
function appendLink(index,active){
var jA = $("<a>",{text:index,href:_url+index});
if(active){
jA.addClass("active");
}
if(_dftOpts.beforeRender){
_dftOpts.beforeRender(jA);
}
jPager.append(jA);
}
function appendFirstAndLast(){
var jFirst = $("<a>",{text:_first});
var jBefore = $("<a>",{text:_before});
var jLast = $("<a>",{text:_last});
var jNext = $("<a>",{text:_next});
jPager.append(jNext).append(jLast);
jBefore.insertBefore(jPager.find("a").first());
jFirst.insertBefore(jBefore);
if(_index === 1){
jFirst.addClass("disabled");
jBefore.addClass("disabled");
}else{
jFirst.attr("href",_url+1);
jBefore.attr("href",_url+(_index-1));
}
if(_index === _page){
jLast.addClass("disabled");
jNext.addClass("disabled");
}else{
jLast.attr("href",_url+_page);
jNext.attr("href",_url+(_index+1));
}
}
function appendEllipsis(){
jPager.append(_ellipsis);
}
//event
function regisiterEvent(){
jPager.on("mouseenter","a",function(){
var jthis = $(this);
if(!jthis.hasClass("active") && !jthis.hasClass("disabled")){
jthis.addClass("hover");
}
}).on("mouseout","a",function(){
var jthis = $(this);
if(!jthis.hasClass("active")){
jthis.removeClass("hover");
}
}).on("click","a",function(){
var jItem = $(this);
if(jItem.hasClass("disabled")){
return;
}
var text = jItem.text();
var index = 0;
switch(text){
case _first:
index = 1;
break;
case _before:
index = _index - 1;
break;
case _last:
index = _page;
break;
case _next:
index = _index + 1;
break;
default:
index = parseInt(text);
break;
}
var callback = _dftOpts.callback;
var newOpts;
_dftOpts.index = index;
jPager.remove();
if(callback){
newOpts = callback(_dftOpts);
}
if(newOpts){
_dftOpts = newOpts;
}
jthis.pagination(_dftOpts);
});
}
}
})(window,$);로그인 후 복사
스타일:
스타일은 매우 간단하며 직접 조정할 수 있습니다.
.pager{height:30px;line-height:30px;font-size: 12px;margin: 25px 0px;text-align: center;color: #2E6AB1;overflow: hidden;}
.pager a{border:1px solid #9AAFE5;color:#2E6AB1;margin:0px 5px;padding:5px 8px;text-decoration: none;}
.pager a.hover,.pager a.active{background-color:#2E6AB1;border-color:#000080;color:#FFF;}
.pager a.disabled{color:#C8CDD2;cursor:auto;}로그인 후 복사
사용 예:
$(".div1").pagination({
count:200,
size:10,
index:1,
lrCount:3,
lCount:1,
rCount:1,
callback:function(options){
//alert(options.index);
//options.count = 300;
//return options;
},
beforeRender:function(jA){
//jA.attr("href","default.aspx?index="+jA.text());
}
});
로그인 후 복사
pagination.js 1.0에는 아직 몇 가지 단점과 버그가 있을 수 있으며, 시간이 지나면 수정하겠습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
