福利到！分享我的分页控件

前台分页控件有很多，这里分享我的分页控件 pagination.js 1.0版本，该控件基于jquery。

先来看一下预览效果：

效果一：

效果二：

效果三：

默认情况下，点击页码会像博客园一样，在url后面加上"#p页码"。

控件有2个参数需要注意：

1. beforeRender: 在每个页码项呈现前会被调用，参数为页码的jQuery对象。这个时候我们可以在呈现前做一些处理，例如增加自己的属性等。默认情况下，点击页码，会在url后面加上“#p页码”，这样的url并不会刷新页面。如果我们需要刷新页面，例如url为，"default.aspx?index=页码"，就可以在这个回调函数里处理。

2. callback: 点击页码触发，参数为整个options。点击页码并不会发起ajax请求，需要自己处理，options.index 就是本次点击的页码。有时候我们的总数可能会变化，callback 可以将 options 参数回传，这里只要重新设置总数，然后 return 即可。

具体看调用例子就明白了。

源代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
/*分页控件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,$);

样式：

样式很简单，可以自己调。

?
1
2
3
4
.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;}

 使用例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(".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 还有可能还有一些不足和bug，我会及时修正。

posted @   我是攻城狮  阅读(1196)  评论(1)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae