JS分页条

  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">&nbsp;&nbsp;转到</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 }

  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     }