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 ????else127 ????{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 ????????else157 ????????{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 ????}