自己写的一个jQuery分页插件
浏览数：41 /
时间：2015年06月09日
1 ;(function($){ 2 $.fn.extend({ 3 pageList: function (json) { 4 function PageList() { 5 this.initHtml = ""; //初次加载后的Html 6 this.num = 0; //页码个数 7 this.totalPageCount = 0;//总页数 8 this.size = 0;//每页数据条数 9 this.hiddenPosition = 3;//省略号的位置 10 this.fwNotNum = 2; //插件前面的非页码个数 11 this.fwNotNumHtml = "";//插件前面的非页码html 12 this.backNotNumHtml = "";//插件后面的非页码html 13 } 14 PageList.prototype.init = function (objPageList, json) { 15 var pageListFunction = this; 16 objPageList.addClass("pageList"); 17 if (json) { 18 if (!json.total || isNaN(json.total)) { 19 json.total = 1; 20 // alert("分页插件total参数异常,插件加载失败"); 21 //return; 22 } 23 if (!json.size || isNaN(json.size)) { 24 json.size = 10; 25 } 26 if (!json.num || isNaN(json.num) || json.num < 10) { 27 json.num = 10; 28 } 29 if(!json.ajax){ 30 json.ajax=function(){}; 31 } 32 } 33 var fwNotNumHtml = "<a class=‘pageList_FirstPage‘><label>首页</label></a><a class=‘pageList_PrevPage‘>上页</a>"; 34 var backNotNumHtml = "<a class=‘pageList_NextPage‘>下页</a><a class=‘pageList_LastPage‘>末页</a><input class=‘jumpNum‘ type=‘text‘ value=‘‘ /><a class=‘jumpText‘ href=‘javascript:void(0)‘>跳转</a>"; 35 var html = ""; 36 html += fwNotNumHtml; 37 var totalPageCount = Math.ceil(json.total / json.size); 38 39 if (totalPageCount <= json.num) { 40 for (var i = 1; i <= totalPageCount; i++) { 41 if (i == 1) { 42 html += "<a class=‘pageList_Num pageList_Current‘>" + i + "</a>"; 43 continue; 44 } 45 html += "<a class=‘pageList_Num‘>" + i + "</a>"; 46 } 47 } 48 else { 49 var hidden = json.num - pageListFunction.hiddenPosition; 50 for (var i = 1; i <= totalPageCount; i++) { 51 if (i == 1) { 52 html += "<a class=‘pageList_Num pageList_Current‘>" + i + "</a>"; 53 continue; 54 } 55 if (i == hidden) { 56 html += "<a class=‘pageList_Hidden‘>...</a>"; 57 break; 58 } 59 html += "<a class=‘pageList_Num‘>" + i + "</a>"; 60 } 61 for (var j = pageListFunction.hiddenPosition - 1; j >= 0; j--) { 62 html += "<a class=‘pageList_Num‘>" + (totalPageCount - j) + "</a>"; 63 } 64 } 65 html += backNotNumHtml; 66 objPageList.html(html); 67 pageListFunction.initHtml = html; 68 pageListFunction.num = json.num; 69 pageListFunction.size = json.size; 70 pageListFunction.totalPageCount = totalPageCount; 71 pageListFunction.fwNotNumHtml = fwNotNumHtml; 72 pageListFunction.backNotNumHtml = backNotNumHtml; 73 pageListFunction.ajax=json.ajax; 74 } 75 PageList.prototype.centerPage = function () { return Math.ceil(this.totalPageCount / 2); } 76 PageList.prototype.limitData = function () { return this.totalPageCount - this.hiddenPosition - 1; } 77 PageList.prototype.clickA = function (objA, objPageList) { 78 var pageListFunction = this; 79 var clickA = 0; 80 if (objA.hasClass("pageList_Current") || objA.hasClass("pageList_Hidden")) { 81 return; 82 } 83 else if (objA.hasClass("pageList_Num")) { 84 clickA = parseInt(objA.html()); 85 } 86 else if (objA.is(".pageList_FirstPage")) { 87 if (pageListFunction.getCurrentData(objPageList) == 1) 88 return; 89 clickA = 1; 90 } 91 else if (objA.is(".pageList_PrevPage")) { 92 clickA = pageListFunction.getCurrentData(objPageList) - 1; 93 if (clickA <= 0) 94 return; 95 } 96 else if (objA.is(".pageList_NextPage")) { 97 clickA = pageListFunction.getCurrentData(objPageList) + 1; 98 if (clickA > pageListFunction.totalPageCount) 99 return; 100 } 101 else if (objA.is(".pageList_LastPage")) { 102 if (pageListFunction.getCurrentData(objPageList) == pageListFunction.totalPageCount) 103 return; 104 clickA = pageListFunction.totalPageCount; 105 } 106 else if (objA.is(".jumpText")||objA.is("input.jumpNum")) { 107 var clickAtext = $(".jumpNum", objPageList).val(); 108 if (clickAtext == "") return; 109 clickA = parseInt(clickAtext); 110 var currentA = pageListFunction.getCurrentData(objPageList); 111 if (isNaN(clickA)) { return; } 112 else if (clickA <=0) { return; } 113 else if (clickA > pageListFunction.totalPageCount) { return; } 114 else if (clickA == currentA) { return; } 115 } 116 pageListFunction.ajax(); 117 pageListFunction.clickNum(clickA, objPageList); 118 } 119 120 PageList.prototype.getCurrentData = function (objPageList) { 121 return parseInt($("a.pageList_Current",objPageList).html()); 122 } 123 PageList.prototype.getHiddenFwOrBackData=function(objPageList,type){//返回省略号前面或后面的值 124 if(type=="fw") 125 return parseInt($("a.pageList_Hidden",objPageList).prev().html()); 126 else if(type=="back") 127 return parseInt($("a.pageList_Hidden", objPageList).next().html()); 128 } 129 PageList.prototype.hiddenFwOrBackHtml = function (type) {//返回省略号前后的htm页码的html 130 var html = ""; 131 if (type === "fw") {//省略号在前 132 for (var i = 1; i <= this.hiddenPosition; i++) { 133 html += "<a class=‘pageList_Num‘>" + i + "</a>"; 134 } 135 } 136 else if (type === "back") {//省略号在后 137 for (var j = this.hiddenPosition - 1; j >= 0; j--) { 138 html += "<a class=‘pageList_Num‘>" + (this.totalPageCount - j) + "</a>"; 139 } 140 } 141 return html; 142 } 143 PageList.prototype.addPageList_Current = function (clickNum, objPageList) { 144 $("a.pageList_Num", objPageList).removeClass("pageList_Current").each(function () { 145 if (parseInt($(this).html()) == clickNum) { 146 $(this).addClass("pageList_Current"); 147 } 148 }); 149 } 150 PageList.prototype.getHiddenHtml = function () { 151 return "<a class=‘pageList_Hidden‘>...</a>"; 152 }; 153 PageList.prototype.newHtml = function (type, objPageList, clickNum) {//返回新的Html,只返回不操作 154 var pageListFunction = this; 155 var html = ""; 156 if (type == 1) 157 html += pageListFunction.initHtml; 158 else if (type == 2) { 159 html += pageListFunction.fwNotNumHtml; //首页,第一页 160 html += pageListFunction.hiddenFwOrBackHtml("fw"); //省略号前的数 161 html += pageListFunction.getHiddenHtml(); //省略号 162 var start = pageListFunction.totalPageCount - (pageListFunction.num - pageListFunction.hiddenPosition - 1) + 1; 163 for (var i = start; i <= pageListFunction.totalPageCount; i++) { 164 html += "<a class=‘pageList_Num‘>" + i + "</a>"; 165 } 166 html += pageListFunction.backNotNumHtml; 167 } 168 else if (type == 3) { 169 clickNum += 1; 170 html += pageListFunction.fwNotNumHtml; 171 var start = clickNum - (pageListFunction.num - pageListFunction.hiddenPosition - 1) + 1; 172 for (var i = start; i <= clickNum; i++) { 173 html += "<a class=‘pageList_Num‘>" + i + "</a>"; 174 } 175 html += pageListFunction.getHiddenHtml(); 176 html += pageListFunction.hiddenFwOrBackHtml("back"); 177 html += pageListFunction.backNotNumHtml; 178 } 179 else if (type == 4) { 180 html += pageListFunction.fwNotNumHtml; 181 html += pageListFunction.hiddenFwOrBackHtml("fw"); 182 html += pageListFunction.getHiddenHtml(); 183 clickNum -= 1; 184 var end = pageListFunction.num - pageListFunction.hiddenPosition - 1 + clickNum - 1; 185 for (var i = clickNum; i <= end; i++) { 186 html += "<a class=‘pageList_Num‘>" + i + "</a>"; 187 } 188 html += pageListFunction.backNotNumHtml; 189 } 190 return html; 191 } 192 PageList.prototype.clickNum = function (clickNum, objPageList) { 193 var pageListFunction = this; 194 var html = ""; 195 if (pageListFunction.totalPageCount <= pageListFunction.num) { 196 pageListFunction.addPageList_Current(clickNum, objPageList); return; 197 } 198 else if (clickNum <= 5) { 199 html = pageListFunction.newHtml(1, objPageList); 200 } 201 else if (clickNum >= pageListFunction.limitData()) { 202 html = pageListFunction.newHtml(2, objPageList); 203 } 204 else { 205 if (clickNum < pageListFunction.centerPage()) 206 html = pageListFunction.newHtml(3, objPageList, clickNum); 207 else if (clickNum >= pageListFunction.centerPage()) 208 html = pageListFunction.newHtml(4, objPageList, clickNum); 209 } 210 objPageList.html(html); 211 pageListFunction.addPageList_Current(clickNum, objPageList); 212 } 213 var objPageList = $(this); 214 var p = new PageList(); 215 p.init(objPageList, json, p); 216 objPageList.on("click", "a:not(‘.pageList_Hidden‘)", function () { 217 p.clickA($(this), objPageList); 218 }); 219 objPageList.on("keyup","input.jumpNum",function(event){ 220 if(event.which===13){ 221 p.clickA($(this), objPageList); 222 } 223 }); 224 } 225 }); 226 })(jQuery);
1 .pageList{ clear:both; overflow:hidden;} 2 .pageList .pageList_Nums{ float:left;} 3 .pageList a{border:1px solid #ccc; margin-left:10px; float:left; display:block; overflow:hidden; padding:3px; font-family:微软雅黑; font-size:12px; min-width:15px; text-align:center; cursor:pointer; height:20px; line-height:20px;} 4 .pageList a:hover,.pageList_Current{ background-color:#278DE1;} 5 .pageList a.pageList_Hidden{ border:none; cursor:default;} 6 .pageList a.pageList_Hidden:hover{ background-color:transparent;} 7 .pageList input.jumpNum{ width:30px; border:1px solid #8c8c8c; float:left; width:30px; height:20px; margin-left:5px; line-height:20px; padding:3px; text-align:center;} 8 .pageList a.jumpText{ border:none;background:none; outline:none; margin-left:0;}
调用插件:
1 $(function(){ 2 $("#pagelist").pageList({ total: 1021, num: 10, size: 8,ajax:function(){ 3 $.ajax({ 4 type: "POST", 5 //dataType: "html", 6 url: "", 7 cache:false, 8 //data: { pageStar: pageStar, pageEnd: pageEnd }, 9 error: function () { }, 10 success: function (data) {//alert("这里的ajax可以正常执行"); 11 } 12 }); 13 } }); 14 })
HTML代码:
1 <div id="pagelist"></div>
界面效果:
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
