第一次寫文章，把最近寫的分頁元件原始碼分享出來，一起學習交流
效果圖
程式碼結構
render: function(obj){
obj.pagesize = obj.pagesize || 20;
/*顯示分頁器的容器元素id*/
this._wrapid = '#'+obj.wrapid;
this._total = obj.total;
this._pagesize = obj.pagesize;
this._currentPage = obj.currentPage;
/*頁碼改變的回撥函式*/
this._cb = obj.onPagechange;
/*快速跳轉值*/
this.quickNum = '1';
/*設定頁碼超過多少個時，顯示省略號*/
if(obj.btnCount<5){
obj.btnCount = 5;
}else if(obj.btnCount%2==0){
//非奇數
obj.btnCount = obj.btnCount+1;
}
this._btnsValue = obj.btnCount?obj.btnCount:7;
/*頁碼過多，左右都存在省略號時，當前點選頁碼左右兩邊的頁碼個數*/
this._halfbtns = parseInt((this._btnsValue-3)/2);
/*顯示的總頁面數*/
this._btnNum = obj.total/obj.pagesize>parseInt(obj.total/obj.pagesize)?parseInt(obj.total/obj.pagesize)+1:parseInt(obj.total/obj.pagesize);
}
複製程式碼bindEvent原始碼
bindEvent: function(){
var that = this;
/*頁碼點選*/
$(that._wrapid).on('click','.pagenum',function(){
that._currentPage = parseInt($(this).text());
that._cb(that._currentPage);
isshowMore.call(that);
});
/*上一頁*/
$(that._wrapid).on('click','#pagination-prev',function(){
if($(this).hasClass('pagination-disabled')){
return;
}
that._currentPage--;
$('#pagination-next').hasClass('pagination-disabled')&&$('#pagination-next').removeClass('pagination-disabled');
if(that._currentPage==1){
$('#pagination-prev').addClass('pagination-disabled');
}else{
$('#pagination-prev').removeClass('pagination-disabled');
}
that._cb(that._currentPage);
isshowMore.call(that);
});
/*下一頁*/
$(that._wrapid).on('click','#pagination-next',function(){
if($(this).hasClass('pagination-disabled')){
return;
}
that._currentPage++;
$('#pagination-prev').hasClass('pagination-disabled')&&$('#pagination-prev').removeClass('pagination-disabled');
if(that._currentPage==that._btnNum){
$('#pagination-next').addClass('pagination-disabled');
}else{
$('#pagination-next').removeClass('pagination-disabled')
}
that._cb(that._currentPage);
isshowMore.call(that);
});
/*快速跳轉*/
$(that._wrapid).on('keyup','#quickNum',function(event){
var e = event || window.event;
if(e.keyCode=='13'){
that._currentPage = e.target.value;
var regnum = /^[1-9]+$/
if(regnum.test(e.target.value+'')){
if(e.target.value>0&&e.target.value<=that._btnNum){
that.quickNum = e.target.value;
that._cb(that._currentPage);
isshowMore.call(that);
}else{
$(this).val('');
}
}else{
$(this).val('');
}
}
})
$(that._wrapid).on('input','#quickNum',function(e){
$(this).val(e.target.value)
})
if(that._btnNum>1){ // 超過1頁，顯示分頁元件
isshowMore.call(this);
}
/*判斷省略符位置*/
function isshowMore(){
if(this._btnNum<=this._btnsValue){
// console.log('不顯示');
creatBtns.call(this,'none')
}else{
if(this._currentPage<=(this._btnsValue-1-this._halfbtns)){
//只顯示後省略
creatBtns.call(this,'after');
}else if(this._currentPage>=this._btnNum-1-this._halfbtns){
//只顯示前省略
creatBtns.call(this,'before')
}else{
//前後省略都顯示
creatBtns.call(this,'all')
}
}
}
/*建立頁碼按鈕標籤*/
function creatBtns(ismorePosition){
var html = '';
var ismore = '<li class="pagination-ellipsis">...</li>';
var firstbtn = '<li class="pagenum pagination-btn" data-num="1">1</li>';
var lastbtn = '<li class="pagenum pagination-btn" data-num='+this._btnNum+'>'+this._btnNum+'</li>';
var prevbtn = '<span class="pagination-btn" id="pagination-prev"><</span>';
var nextbtn = '<span class="pagination-btn" id="pagination-next">></span>'
if(this._currentPage == 1){
firstbtn = '<li class="pagenum pagination-btn pagination-current" data-num="1">1</li>';
prevbtn = '<span class="pagination-btn pagination-disabled" id="pagination-prev"><</span>'
}
if(this._currentPage == this._btnNum){
lastbtn = '<li class="pagenum pagination-btn pagination-current" data-num='+this._btnNum+'>'+this._btnNum+'</li>';
nextbtn = '<span class="pagination-btn pagination-disabled" id="pagination-next">></span>'
}
if(ismorePosition == 'none'){
for(var i = 1; i <= this._btnNum; i++){
if(i == this._currentPage){
html+= '<li class="pagenum pagination-btn pagination-current" data-num='+i+'>'+i+'</li>';
}else{
html += '<li class="pagenum pagination-btn" data-num='+i+'>'+i+'</li>';
}
}
}
if(ismorePosition=="after"){
// console.log('省略在後面');
for(var i = 1; i <= this._btnsValue-1; i++){
if(i == this._currentPage){
html += '<li class="pagenum pagination-btn pagination-current" data-num='+i+'>'+i+'</li>';
}else{
html += '<li class="pagenum pagination-btn" data-num='+i+'>'+i+'</li>';
}
}
html = html + ismore + lastbtn;
}
if(ismorePosition=="before"){
// console.log('省略在前面');
html = html + firstbtn + ismore;
for(var i=this._btnNum-(this._btnsValue-2);i<=this._btnNum;i++){
if(i == this._currentPage){
html+='<li class="pagenum pagination-btn pagination-current" data-num='+i+'>'+i+'</li>';
}else{
html+='<li class="pagenum pagination-btn" data-num='+i+'>'+i+'</li>';
}
}
}
if(ismorePosition=="all"){
// console.log('省略前後都有');
var halfnum = parseInt((this._btnsValue-3)/2);
html += firstbtn + ismore;
for(var i = (this._currentPage-halfnum);i<=this._currentPage+halfnum;i++){
if(i == this._currentPage){
html += '<li class="pagenum pagination-btn pagination-current" data-num='+i+'>'+i+'</li>'
}else{
html += '<li class="pagenum pagination-btn" data-num='+i+'>'+i+'</li>'
}
}
html+=ismore+lastbtn;
}
//快速跳轉頁碼功能
var quickJump = '<span class="quicktxt"> 跳至 </span><input id="quickNum" value="'+ that.quickNum + '"/><span class="quicktxt"> 頁</span>'
$(this._wrapid).html(prevbtn+'<ul class="pagination-wrap">'+html+'</ul>' + nextbtn + quickJump);
}
}
複製程式碼頁面引用
css
ul,li{
margin: 0;
padding:0;
}
.pagination-btn{
padding: 6px 10px;
margin-right: 4px;
border-radius: 4px;
border: 1px solid #ccc;/*no*/
cursor: pointer;
color: #999;
display: inline-block;
}
.pagination-wrap{
position: relative;
display: inline-block;
}
.pagination-ellipsis{
color: #999;
position: relative;
top: -5px;
display: inline-block;
padding: 0 12px;
margin-right: 4px;
}
.pagination-current{
border:1px solid #3E8DDD;/*no*/
color:#3E8DDD;
}
.pagination-disabled{
cursor: not-allowed;
}
#pagination-next,#pagination-prev{
padding-right:8px;
padding-left:8px;
}
#quickNum{
width: 50px;
padding: 8px 6px;
outline: none;
border-radius: 4px;
border: 1px solid #ccc;/*no*/
display:inline-block;
color:#999;
}
.quicktxt{
color:#999;
}
複製程式碼