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>
界面效果: