做分頁條遇到的問題主要是中間幾個頁碼如何計算.

目前做的這個分頁功能:前進,後退,首,末,中間顯示指定個數頁碼按鈕,可選擇轉到指定頁面,可選擇幾種尺寸和顏色

大體思路:

定義分頁類

// 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">&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     }

JS分頁條