JS分页控件

分页插件代码：

 1 (function ($) {
 2     $.fn.pager = function (options) {
 3         var opts = $.extend({}, $.fn.pager.defaults, options);
 4         return this.each(function () {
 5             $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
 6             $(‘.pages li‘).mouseover(function () { document.body.style.cursor = "pointer"; }).mouseout(function () { document.body.style.cursor = "auto"; });
 7         });
 8     };
 9
10     function renderpager(pagenumber, pagecount, buttonClickCallback) {
11         var $pager = $(‘<ul class="pages"></ul>‘);
12         $pager.append(renderButton(‘首页‘, pagenumber, pagecount, buttonClickCallback)).append(renderButton(‘上一页‘, pagenumber, pagecount, buttonClickCallback));
13         var startPoint = 1;
14         //var endPoint = pagecount < 9 ? pagecount : 9;
15         var endPoint = pagecount < 7 ? pagecount : 7;
16         //var thpoint = "<li class=‘thpoint‘>...</li>";
17         var thpoint = "";
18         if (pagenumber > 4) {
19             startPoint = pagenumber - 3;
20             endPoint = pagenumber + 3;
21         }
22         if (endPoint > pagecount) {
23             startPoint = pagecount - 6;
24             endPoint = pagecount;
25             thpoint = "";
26         }
27         if (startPoint < 1) {
28             startPoint = 1;
29         }
30         for (var page = startPoint; page <= endPoint; page++) {
31             var currentButton = $(‘<li class="page-number">‘ + (page) + ‘</li>‘);
32             page == pagenumber ? currentButton.addClass(‘pgCurrent‘) : currentButton.click(function () {
33                 buttonClickCallback(this.firstChild.data);
34             });
35             currentButton.appendTo($pager);
36         }
37         $pager.append(thpoint).append(renderButton(‘下一页‘, pagenumber, pagecount, buttonClickCallback)).append(renderButton(‘末页‘, pagenumber, pagecount, buttonClickCallback));
38         $pager.append("<li class=‘thpoint‘>共: " + pagecount + " 页</li>");
39         //var strgoto = $("<li class=‘thpoint‘>当前<input type=‘text‘ value=‘" + pagenumber + "‘maxlength=‘6‘ id=‘gotoval‘ style=‘width:20px; height:16px;margin-top:-3px;padding-top:2px;padding-left:10px;‘/>页</li>");
40         var strgoto = "";
41         $pager.append(strgoto);
42         //$pager.append(changepage(‘go‘, pagecount, buttonClickCallback));
43         return $pager;
44     }
45     function changepage(buttonLabel, pagecount, buttonClickCallback) {
46         var $btngoto = $(‘<li class="pgNext">‘ + buttonLabel + ‘</li>‘);
47         $btngoto.click(function () {
48             var gotoval = $(‘#gotoval‘).val();
49             var patrn = /^[1-9]{1,20}$/;
50             if (!patrn.exec(gotoval)) {
51                 alert("请输入非零的正整数！");
52                 return false;
53             }
54             var intval = parseInt(gotoval);
55             if (intval > pagecount) {
56                 alert("您输入的页面超过总页数 " + pagecount);
57                 return;
58             }
59             buttonClickCallback(intval);
60         });
61         return $btngoto;
62     }
63
64     function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
65         var $Button = $(‘<li class="pgNext">‘ + buttonLabel + ‘</li>‘);
66         var destPage = 1;
67         switch (buttonLabel) {
68             case "首页":
69                 destPage = 1;
70                 break;
71             case "上一页":
72                 destPage = pagenumber - 1;
73                 break;
74             case "下一页":
75                 destPage = pagenumber + 1;
76                 break;
77             case "末页":
78                 destPage = pagecount;
79                 break;
80         }
81         if (buttonLabel == "首页" || buttonLabel == "上一页") {
82             pagenumber <= 1 ? $Button.addClass(‘pgEmpty‘) : $Button.click(function () { buttonClickCallback(destPage); });
83         }
84         else {
85             pagenumber >= pagecount ? $Button.addClass(‘pgEmpty‘) : $Button.click(function () { buttonClickCallback(destPage); });
86         }
87         return $Button;
88     }
89
90     $.fn.pager.defaults = {
91         pagenumber: 1,
92         pagecount: 1
93     };
94 })(jQuery);

页面调用JS

 1 var invert = {
 2     pager: function (pageIndex) {
 3
 4                   $("#pager").pager({
 5                       pagenumber: pageIndex,
 6                       pagecount: data.pageNum,
 7                       totalcount: data.totalCount,
 8                       buttonClickCallback: invert.pageClick
 9                   });
10
11
12
13               }
14
15     },
16     pageClick: function (pageclickednumber) {//分页回调
17         var status = invert.getStatus();
18         invert.pager(pageclickednumber,status);
19     }
20 };

<div id="pager" class="w-page">

</div>

分页样式

 1 /* jquery.page.js css  */
 2 .w-page{margin:40px auto 30px;}
 3 ul.pages {display:block;border:none;text-transform:uppercase;font-size:12px; display: inline-block; padding:0; overflow: hidden; font-size: 14px;}
 4 ul.pages li {list-style:none;float:left;text-decoration:none;margin:0 15px 0 0;padding:6px 10px;color:#b6b6b6;background-color:#c6c6c6; color: #fff;}
 5 ul.pages li:hover {background-color:#ff4747;}
 6 ul.pages li.pgEmpty,li.pgNext { color:#fff; background-color:#c6c6c6; padding:6px 10px;}
 7 ul.pages li.pgCurrent { color:#fff;font-weight:700;background:#ff4747;}
 8 div#pager{text-align:center;}
 9 #pager .count:hover,#pager .thpoint:hover{background-color:#c6c6c6;}
10 #pager .thpoint,ul.pages li.pgEmpty{cursor: default;}