自己写的一个jQuery分页插件

2021-10-25 22:08:08

  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>

界面效果:

自己写的一个jQuery分页插件,布布扣,bubuko.com

自己写的一个jQuery分页插件

码农公寓

相关文章