发一个自己做过的js分页，给那些入门的同学。
引用了Jquery类库，此方法是Jquery方法扩展。
js部分：
1 $.fn.extend({
2 ///<summary>生成分页</summary>
3 ///<param name="v">总页数</param>
4 ///<param name="c">当前页码</param>
5 ///<param name="fn">获取list函数</param>
6 InitPage: function (v, c, fn) {
7 if (v == "undefined" || c == "undefined" || fn == "undefined" || typeof (fn) != "function" || parseInt(v) <= 0 || parseInt(c) <= 0)
8 return;
9 var pageDiv = $(this);
10 pageDiv.empty();
11 var pages = [1, 2];
12 if (v == 1) pages = [1];
13 for (var i = -3; i < 4; i++) {
14 var t = c + i
15 if (t > 0 && v >= t) {
16 if (!pages.Contains(t))
17 pages.push(t);
18 }
19 }
20 if (!pages.Contains(v - 1) && v - 1 != 0) pages.push(v - 1);
21 if (!pages.Contains(v)) pages.push(v);
22 if (c != 1) $("<a/>", { text: "上一页", val: pages[i - 1] + 1, click: function (ev) { fn(c - 1); } }).appendTo(pageDiv);
23 for (var i = 0; i < pages.length; i++) {
24 if (pages[i] == c)
25 $("<span/>", { "class": "cpb", text: c }).appendTo(pageDiv);
26 else {
27 if (pages[i] - pages[i - 1] > 1) {
28 if (pages[i] < c)
29 $("<a/>", { text: "…", val: pages[i] - 1, click: function (ev) { fn(parseInt($(this).val())); } }).appendTo(pageDiv);
30 else
31 $("<a/>", { text: "…", val: pages[i - 1] + 1, click: function (ev) { fn(parseInt($(this).val())); } }).appendTo(pageDiv);
32 }
33 $("<a/>", { text: pages[i], val: pages[i], click: function (ev) { fn(parseInt($(this).val())); } }).appendTo(pageDiv);
34 };
35 }
36 if (c != v) $("<a/>", { text: "下一页", val: pages[i - 1] + 1, click: function (ev) { fn(c + 1); } }).appendTo(pageDiv);
37 $("<input/>", { type: "text", width: "20px", title: "输入页码数，回车即达到指定的页码",
38 keyup: function (ev) {
39 $(this).val($(this).val().replace(/[^\d]/g, ""));
40 },
41 keypress: function (ev) {
42 if (ev.keyCode != 13) return;
43 var pi = parseInt($(this).val());
44 if (pi > v)
45 fn(v);
46 else
47 fn(pi);
48 }
49 }).appendTo(pageDiv);
50 $("<a/>", { width: "40px", text: "跳转",
51 click: function (ev) {
52 var i = parseInt($(this).prev("input").val());
53 if (i > 0) fn(i);
54 }
55 }).appendTo(pageDiv);
56 }
57 });
样式部分：（可以自己修改）
.pagediv a {padding: 1px 6px; border: solid 1px #ddd; margin-right:5px;color:#B7041A}
.pagediv input {padding: 1px 6px; border: solid 1px #ddd; margin-right:5px;color:#666666}
.pagediv a:visited {padding: 1px 6px; border: solid 1px #ddd; }
.pagediv .cpb {padding: 1px 6px;font-weight: bold; font-size: 13px;border:solid 1px #B7041A; background:#B7041A; color:White; margin-right:5px;}
.pagediv a:hover {color: #fff; background:#B7041A;border-color:#FBABBE;text-decoration: none;cursor:pointer}
调用方法：
1.页面中要放置一个classname为pagediv分页的标签；
2.$(".pagediv").InitPage(Math.ceil(_crecount / _pagesize), _pageindex, GetList)，
将 该句代码嵌套在：GetList 中；
其中
_crecount：总记录数，_pagesize：页大小，_pageindex：当前页码，GetList：获取列表的函数。
posted on
