js实现分页

发一个自己做过的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：获取列表的函数。