做分页条遇到的问题主要是中间几个页码如何计算.
目前做的这个分页功能:前进,后退,首,末,中间显示指定个数页码按钮,可选择转到指定页面,可选择几种尺寸和颜色
大体思路:
定义分页类
// getdataE:请求数据方法, pageindex:当前页码,pagesize:分页数大小 ,listcount: 总条数
// ,pagelistcount:取回数据条数,[PageBtnCount]:分页条上显示页码个数(1 - 10)
// ,[uisize]: 尺寸大小 , [uicolor]:颜色
function pageNumber(getdataE, pageindex, pagesize, listcount, pagelistcount, pagebtncount, uisize, uicolor)
{
}
// 主要方法: 生成分页栏UI.返回分页栏DOM对象
pageNumber.prototype.create = function ()
{
}
调用这个方法,得到分页栏的HTML,然后添加到容器中就行了.
关于中间几个页码的计算问题:
pagebtncount=8 // 假如需要显示8个按钮 那么可能是这样
pagebtncount=7 // 假如需要显示7个按钮 那么可能是这样
问题在于在当前页码位于正中时,要如何计算开始和结束页码.(如果是奇数,则当前页码正好位于正中,如果是偶数,则假定位于中间靠左的位置)
// 根据图可知,开始和结束页码值可由如下公式计算.例如:
// 要显示7个页码,当前页为4,要放在中间,则前面有3个(1,2,3),后面有3个(5,6,7).若当前页码为5.则前三个(2,3,4)后三个(6,7,8)
var startIndex = pageIndex - parseInt(pagebtncount / 2)+ (pagebtncount % 2 == 0 ? 1 : 0);
var endIndex = pageIndex + parseInt(pagebtncount/ 2);
// 这种算法并不适用所有情况,例如:
// 当前页码为2时,用以上公式计算的话,则前三个为(-1,0,1)后三个为(3,4,5).显然1以下的页码不对. 这是页码小于1的情况
// 若当前页码为9,则前三个(6,7,8)后三个(10,11,12).显然总共才10页,10以上的页码也是不对的. 这是页码大于最大页码的情况
// 如果计算出这两种错误的页码,需要调整如下:
// 1.页码小于1情况:
将开始页码startIndex=1,再重新计算结束页码:endIndex=pagebtncount (结束页码等于要显示的页码按钮数).这里应注意,如果endIndex超出了总页数,则endIndex=总页数
// 2.超过最大页码情况
将结束页码endIndex=pagecount,再重新计算开始页码:startIndex=endIndex-pagebtncount+1(开始页码等于结束页码减掉要显示的按钮数加1 ).同上,如果得出startIndex小于1,则startIndex=1
到此,可以正确的计算出中间的页码值了.然后循环生成标签即可.
完整代码:
1 // 分页控制类1.0
2 // getdataE:请求数据方法, pageindex:当前页码,pagesize:分页数大小 ,listcount: 总条数
3 // ,pagelistcount:取回数据条数,[PageBtnCount]:分页条上显示页码个数(1 - 10)
4 // ,[uisize]: 尺寸大小 , [uicolor]:颜色
5 function pageNumber(getdataE, pageindex, pagesize, listcount
6 , pagelistcount, pagebtncount, uisize, uicolor)
7 {
8 // 请求数据方法,必传
9 this.getData = typeof getdataE == ‘function‘ ? getdataE : null;
10 // 表示当前页码>1
11 this.PageIndex = (pageindex && pageindex > 0) ? pageindex : 1;
12 // 每页显示记录数[2-50]
13 this.PageSize = (pagesize && pagesize > 1 && pagesize < 51) ? pagesize : 10;
14 // 表示记录总数
15 this.ListCount = (listcount && listcount >= 0) ? listcount : 0;
16 // 当前页记录个数,=取回数据集个数
17 this.PageListCount;
18
19 // 显示几个页码按钮[1-10]
20 this.PageBtnCount =parseInt((pagebtncount && pagebtncount > 0 && pagebtncount < 11) ? pagebtncount : 7);
21 // 分页条尺寸
22 this.UISize = uisize || null;
23 // 分页条颜色
24 this.UIColor = uicolor || null;
25 }
26 // 表示前一页码(应由当前页码计算得出)
27 pageNumber.prototype.PrevPage = function ()
28 {
29 return this.PageIndex <= 1 ? 1 : this.PageIndex - 1;
30 }
31 // 表示后一页码
32 pageNumber.prototype.NextPage = function ()
33 {
34 return this.IsEndPage ? this.PageIndex : this.PageIndex + 1;
35 }
36 // 总页数(由数量总数和分页大小算出)
37 pageNumber.prototype.PageCount = function ()
38 {
39 if (this.ListCount >= 0 && this.PageSize >= 1 && this.PageIndex >= 1)
40 {
41 var pagecount = parseInt(this.ListCount / this.PageSize);
42 var pagecountM = this.ListCount % this.PageSize;
43 return pagecountM > 0 ? pagecount + 1 : pagecount;
44 }
45 return 0;
46 }
47 // 表示是否已经到最后一页(由pagesize,pageindex和总数量算出,如果未设定这三值,则返回false)
48 pageNumber.prototype.isEndPage = function ()
49 {
50 if (this.ListCount >= 0 && this.PageSize >= 1 && this.PageIndex >= 1)
51 {
52 return this.PageIndex * this.PageSize >= this.ListCount;
53 }
54 return false;
55 }
56 // 生成分页栏UI.返回分页栏DOM对象
57 pageNumber.prototype.create = function ()
58 {
59 var _self = this;
60 // 外层
61 var box = $(String.Format(‘<div class="pagenumberbox {0} {1}"></div>‘, this.UISize || ‘‘, this.UIColor||‘‘));
62
63 // 显示 首页,上一页
64 if (this.PageIndex <= 1)
65 {
66 box.append(‘<a class="pagebtn first disabled" title="首页"></a><a class="pagebtn prev disabled" title="上页"></a>‘);
67 }
68 else
69 {
70 var firstpage = $(‘<a class="pagebtn first" title="首页"></a>‘).click(
71 function ()
72 {
73 _self.getData(1, this);
74 });
75 box.append(firstpage);
76 var prevpage = $(‘<a class="pagebtn prev" title="上页"></a>‘).click(
77 function ()
78 {
79 _self.getData(_self.PrevPage(), this);
80 });
81 box.append(prevpage);
82 }
83
84 // 显示 当前页码,以及按PageBtnCount设定前后页码个数.中间页码按钮,关键在于确认起止页码
85 var pagecount = this.PageCount();
86 // 如果分页数为偶数,则当前页码不能在正中.例如当前页为4,要显示6个页码则是: 2 3 (4:当前页码在此) 5 6 7
87 var startIndex = this.PageIndex - parseInt(this.PageBtnCount / 2)
88 + (this.PageBtnCount % 2 == 0 ? 1 : 0);
89 var endIndex = this.PageIndex + parseInt(this.PageBtnCount / 2);
90 // 起始页小于1,说明当前页码位于正中时,前面页码数不够了.应将1页为起始页码,而结束页码也应该重新计算
91 if (startIndex < 1)
92 {
93 startIndex = 1;
94 // 根据要显示的页码数计算结束页码,如果算出页码数大于总页码,则以总页码数为结束页码
95 endIndex = this.PageBtnCount;
96 if (endIndex > pagecount)
97 endIndex = pagecount;
98 }
99 // 结束页码大于总页码,说明当前页码位于正中时,后面的页码数不够.应将总页码数为终止页码,起始页码应重新计算
100 if (endIndex > pagecount)
101 {
102 endIndex = pagecount;
103 // 根据要显示的页码数计算起始页码,如果算出小于1,则以1为起始页码
104 startIndex = endIndex - this.PageBtnCount + 1;
105 if (startIndex < 1)
106 startIndex = 1;
107 }
108 //
109 for (var i = startIndex; i <= endIndex; i++)
110 {
111 var pagenum = i;
112 var pagebtn = $(String.Format(‘<a class="{0}" val="{1}">{1}</a>‘
113 , pagenum == this.PageIndex ? ‘current pagebtn‘ : ‘pagebtn‘, pagenum));
114 pagebtn.click(function ()
115 {
116 _self.getData($(this).attr(‘val‘), this);
117 });
118 box.append(pagebtn);
119 }
120
121 // 显示 下一页,末页
122 if (this.isEndPage())
123 {
124 box.append(‘<a class="pagebtn next disabled" title="下页"></a><a class="pagebtn last disabled" title="末页"></a>‘);
125 }
126 else
127 {
128 var nextpage = $(‘<a class="pagebtn next" title="下页"></a>‘).click(
129 function ()
130 {
131 _self.getData(_self.NextPage(), this);
132 });
133 box.append(nextpage);
134 var lastpage = $(‘<a class="pagebtn last" title="末页"></a>‘).click(
135 function ()
136 {
137 _self.getData(_self.PageCount(), this);
138 });
139 box.append(lastpage);
140 }
141 // 显示 总记录数/总页数
142 var total_part = ‘<span class="pagelabel">共{1}页 / {0}条数据 </span>‘;
143 total_part = String.Format(total_part, this.ListCount, this.PageCount());
144 box.append(total_part);
145
146 // 显示 页码选择框
147 box.append(‘<span class="pagelabel"> 转到</span>‘);
148 var pageselect = $(‘<select class="pagenumselect"></select>‘);
149 var option = ‘‘;
150 for (var pagenum = 1; pagenum <= this.PageCount(); pagenum++)
151 {
152 if (pagenum == this.PageIndex)
153 {
154 option += String.Format(‘<option value="{0}" selected="selected">{0}</option>‘, pagenum);
155 }
156 else
157 {
158 option+=String.Format(‘<option value="{0}">{0}</option>‘, pagenum);
159 }
160 }
161 pageselect.append(option);
162 pageselect.change(function ()
163 {
164 _self.getData(this.value);
165 });
166 box.append(pageselect);
167 box.append(‘<span class="pagelabel">页</span>‘);
168 return box[0];
169 }
分页控制类pageNumber
样式:
1 /*外层*/
2 .pagenumberbox {
3 text-align: center;
4 font-size: 0;
5 padding: 5px 0;
6 /**/
7 -moz-user-select: none;
8 -ms-user-select: none;
9 -webkit-user-select: none;
10 user-select: none;
11 }
12 /*页码按钮*/
13 .pagenumberbox .pagebtn {
14 display: inline-block;
15 text-decoration: none;
16 border-radius: 4px;
17 border: 1px solid #ddd;
18 color: #2a64fc;
19 cursor: pointer;
20 margin: auto 5px;
21 }
22 /*文字*/
23 .pagenumberbox .pagelabel {
24 color: #333;
25 }
26 /*按钮禁用*/
27 .pagenumberbox .pagebtn.disabled {
28 cursor: not-allowed;
29 filter: alpha(opacity=65);
30 -webkit-box-shadow: none;
31 box-shadow: none;
32 opacity: .75;
33 color: #ddd;
34 }
35
36 .pagenumberbox .pagebtn:not(.disabled):hover, .pagenumberbox .pagenumselect:hover {
37 background-color:#eee;
38 }
39
40 /*页码选择框*/
41 .pagenumberbox .pagenumselect {
42 display: inline-block;
43 border: 1px solid #ddd;
44 border-radius: 4px;
45 width: auto;
46 color: #333;
47 margin: 0 5px;
48 }
49 /*特定按钮 首页 尾页 上页 下页 当前页*/
50 .pagenumberbox .first:before {
51 content: "首页";
52 }
53
54 .pagenumberbox .last:before {
55 content: "末页";
56 }
57
58 .pagenumberbox .prev:before {
59 content: "上一页";
60 }
61
62 .pagenumberbox .next:before {
63 content: "下一页";
64 }
65 /*当前页*/
66 .pagenumberbox .current.pagebtn {
67 cursor: default;
68 color: #292929;
69 font-weight: 600;
70 background-color: #eee;
71 }
72
73 /*大小 四种,f14 f16 f18 f20默认f12 font-size:12*/
74 .pagenumberbox .pagebtn {
75 padding: 3px 5px;
76 width: 36px;
77 }
78
79 .pagenumberbox .pagebtn,
80 .pagenumberbox .pagelabel,
81 .pagenumberbox .pagenumselect {
82 font-size: 12px;
83 vertical-align: middle;
84 }
85
86 .pagenumberbox.f14 .pagebtn {
87 padding: 5px 7px;
88 width: 42px;
89 }
90
91 .pagenumberbox.f14 .pagenumselect {
92 padding: 2px 4px;
93 }
94
95 .pagenumberbox.f14 .pagebtn,
96 .pagenumberbox.f14 .pagelabel,
97 .pagenumberbox.f14 .pagenumselect {
98 font-size: 14px;
99 }
100
101 .pagenumberbox.f16 .pagebtn {
102 padding: 7px 9px;
103 width: 48px;
104 }
105
106 .pagenumberbox.f16 .pagenumselect {
107 padding: 4px 6px;
108 }
109
110 .pagenumberbox.f16 .pagebtn,
111 .pagenumberbox.f16 .pagelabel,
112 .pagenumberbox.f16 .pagenumselect {
113 font-size: 16px;
114 }
115
116 .pagenumberbox.f18 .pagebtn {
117 padding: 9px 11px;
118 width: 54px;
119 }
120
121 .pagenumberbox.f18 .pagenumselect {
122 padding: 6px 8px;
123 }
124
125 .pagenumberbox.f18 .pagebtn,
126 .pagenumberbox.f18 .pagelabel,
127 .pagenumberbox.f18 .pagenumselect {
128 font-size: 18px;
129 }
130
131 .pagenumberbox.f20 .pagebtn {
132 padding: 11px 13px;
133 width: 60px;
134 }
135
136 .pagenumberbox.f20 .pagenumselect {
137 padding: 8px 10px;
138 }
139
140 .pagenumberbox.f20 .pagebtn,
141 .pagenumberbox.f20 .pagelabel,
142 .pagenumberbox.f20 .pagenumselect {
143 font-size: 20px;
144 }
145 /*颜色 3种 默认是蓝色*/
146 .pagenumberbox.pnred .pagebtn {
147 color: #d9534f;
148 border-color:#d9534f;
149 }
150 .pagenumberbox.pngreen .pagebtn {
151 color: #5cb85c;
152 border-color:#5cb85c;
153 }
154 .pagenumberbox.pnyellow .pagebtn {
155 color: #f0ad4e;
156 border-color:#f0ad4e;
157 }
分页控制类CSS
时间： 2024-07-31 14:18:49