自己写的一个jQuery分页插件

  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>

 界面效果: