JavaScript实现的分页功能[用于搭配后台使用]

Posted 2020-07-03 卷柏的花期

 1     (function(root){
 2 
 3         function Page(params){
 4 
 5             this.oTarget = document.getElementById(params.dom);
 6             this.fn = params.fn;
 7             this.pageNumber = params.pageNumber;
 8             this.interval = params.interval || 2;
 9             this.page = 1;
10             this.start = 1;
11             this.end = (this.interval*2+1);
12             
13             this.dom();
14             this.bind();
15         }
16         Page.prototype.dom=function(){
17             this.last = true;
18             this.Data = [];
19 
20             if(this.page > this.interval && this.page < this.pageNumber - this.interval){ // 核心思路，以当前页码为准，按照间隔对应的生成。
21                 this.start = this.page - this.interval;
22                 this.end = this.page + this.interval;
23             }else if(this.page <= this.interval){ // 如果小于间隔，则按照默认值生成。
24                 this.start = 1;
25                 this.end = (this.interval*2+1); 
26             }else if( this.page >= this.pageNumber - this.interval && this.page <= this.pageNumber){
27                 this.start = this.pageNumber - (this.interval*2+1);
28                 this.end = this.pageNumber;
29                 this.last = false; // 用于判断..最终值是否生成。
30             }
31     
32             if(this.page > 1){
33                 this.Data.push(‘<a href="javascript:;"  class="prev">上一页</a>‘);
34                 this.Data.push(‘...‘);
35             }
36 
37             for(var i=this.start;i<=this.end;i++){
38 
39                 if(this.page == i){
40                     this.Data.push(‘<span>‘+i+‘</span>‘);
41                 }else{
42                     this.Data.push(‘<a href="javascript:;">‘+i+‘</a>‘);
43                 }
44                 
45             }
46             
47             if(this.last){
48                 this.Data.push(‘...‘);
49                 this.Data.push(‘<a href="javascript:;"  class="last">‘+ this.pageNumber +‘</a>‘);
50             }
51 
52             if(this.page < this.pageNumber){
53                 this.Data.push(‘<a href="javascript:;"  class="next">下一页</a>‘);
54             }
55 
56             this.oTarget.innerhtml = this.Data.join(‘‘);
57         }
58         Page.prototype.bind=function(){
59             var _this = this;
60             this.oTarget.onclick=function(ev){
61 
62                 var e = ev || event,
63                     o = e.target || e.srcElement;
64                     switch(o.className){
65                         case ‘next‘ : _this.page++;break;
66                         case ‘prev‘ : _this.page--;break;
67                         case ‘last‘ : _this.page = _this.pageNumber;break;
68                         default:
69                             if(o.tagName == ‘A‘ && !/next|prev|last/.test(o.className)){
70                                 _this.page = parseInt(o.innerHTML);
71                             }else{
72                                 return false; // 消除对当前自身的再次单击
73                             }
74                     }
75                 _this.fn(_this.page);
76                 _this.dom();
77             
78             }
79         }
80 
81         root.Page = function(params){
82             new Page(params);
83         }
84     })(window)

调用方法：

 1     Page({
 2         ‘dom‘:‘pages‘, // 承载分页内容的目标盒子
 3         ‘pageNumber‘:10, // 最大页数
 4         ‘interval‘:2, // 页面间隔。
 5         ‘fn‘:function(num){ // 页码回调函数
 6             
 7             console.log(num) //显示当前的分页值。
 8             
 9         }
10     });