jQuery之自定义pagination控件

slpagination

效果：

slpagination.js

  1 (function($) {
  2     $.fn.slpagination = function(options, params) {
  3         if ($.type(options) == "string") {
  4             var method = $.fn.slpagination.methods[options];
  5             if (method) {
  6                 return method(this, params);
  7             } else {
  8                 return null;
  9             }
 10         }
 11         var settings = {};
 12         $.extend(settings, $.fn.slpagination.defaults, options);
 13         $(this).data("settings", settings);
 14         $(this).attr({
 15             "class" : settings.css,
 16             style : settings.style
 17         });
 18         $(this).empty();
 19         if (settings.total == 0) {
 20             settings.total = settings.pageSize;
 21         }
 22         var pageCount = parseInt(settings.total / settings.pageSize);
 23         pageCount = pageCount * settings.pageSize >= settings.total ? pageCount : (pageCount + 1);
 24         $("<input>", {
 25             type : "text",
 26             style : "margin:0 0 0 3px;30px;float:left;",
 27             value : settings.pageSize,
 28             blur : function() {
 29                 var r = /^[0-9]*[1-9][0-9]*$/;
 30                 if (r.test($(this).val())) {
 31                     settings.pageIndex = 1;
 32                     $("input:eq(1)", $(this).parent()).val(1);
 33                     settings.pageSize = $(this).val();
 34                     settings.onChangePageSize($(this).val());
 35                 } else {
 36                     $(this).val(settings.pageSize);
 37                 }
 38 
 39             }
 40         }).appendTo(this);
 41         $("<span>", {
 42             style : "cursor:pointer;margin:0 0 0 10px;",
 43             mouseenter : function() {
 44                 $(this).addClass("slpagination-button-enter");
 45             },
 46             mouseleave : function() {
 47                 $(this).removeClass("slpagination-button-enter");
 48             },
 49             click : function() {
 50                 settings.pageIndex = 1;
 51                 $("input:eq(1)", $(this).parent()).val(1);
 52                 settings.onSelectPage(1);
 53             }
 54         }).text("<<").appendTo(this);
 55         $("<span>", {
 56             style : "cursor:pointer;margin:0 0 0 10px;",
 57             mouseenter : function() {
 58                 $(this).addClass("slpagination-button-enter");
 59             },
 60             mouseleave : function() {
 61                 $(this).removeClass("slpagination-button-enter");
 62             },
 63             click : function() {
 64                 settings.pageIndex--;
 65                 if (settings.pageIndex <= 0) {
 66                     settings.pageIndex = 1;
 67                 }
 68                 $("input:eq(1)", $(this).parent()).val(settings.pageIndex);
 69                 settings.onSelectPage(settings.pageIndex);
 70             }
 71         }).text("<").appendTo(this);
 72         $("<span>", {
 73             style : "margin:0 0 0 20px;"
 74         }).text(settings.beforePageText).appendTo(this);
 75         $("<input>", {
 76             type : "text",
 77             style : "margin:0 0 0 3px;30px;",
 78             value : settings.pageIndex,
 79             blur : function() {
 80                 var r = /^[0-9]*[1-9][0-9]*$/;
 81                 if (r.test($(this).val())) {
 82                     if ($(this).val() > pageCount) {
 83                         $(this).val(pageCount);
 84                     }
 85                     settings.pageIndex = $(this).val();
 86                     settings.onSelectPage($(this).val());
 87                 } else {
 88                     $(this).val(settings.pageIndex);
 89                 }
 90             }
 91         }).appendTo(this);
 92         $("<span>", {
 93             style : "margin:0 0 0 3px;"
 94         }).text(settings.afterPageText.replace(/{pageCount}/, pageCount)).appendTo(this);
 95         $("<span>", {
 96             style : "cursor:pointer;margin:0 0 0 10px;",
 97             mouseenter : function() {
 98                 $(this).addClass("slpagination-button-enter");
 99             },
100             mouseleave : function() {
101                 $(this).removeClass("slpagination-button-enter");
102             },
103             click : function() {
104                 settings.pageIndex++;
105                 if (settings.pageIndex > pageCount) {
106                     settings.pageIndex = pageCount;
107                 }
108                 $("input:eq(1)", $(this).parent()).val(settings.pageIndex);
109                 settings.onSelectPage(settings.pageIndex);
110             }
111         }).text(">").appendTo(this);
112         $("<span>", {
113             style : "cursor:pointer;margin:0 0 0 10px;",
114             mouseenter : function() {
115                 $(this).addClass("slpagination-button-enter");
116             },
117             mouseleave : function() {
118                 $(this).removeClass("slpagination-button-enter");
119             },
120             click : function() {
121                 settings.pageIndex = pageCount;
122                 $("input:eq(1)", $(this).parent()).val(settings.pageIndex);
123                 settings.onSelectPage(settings.pageIndex);
124             }
125         }).text(">>").appendTo(this);
126         $("<span>", {
127             style : "margin:0 0 0 100px;clear:right;"
128         }).text(settings.displayMsg.replace(/{from}/, (settings.pageIndex - 1) * settings.pageSize + 1).replace(/{to}/, (settings.pageIndex * settings.pageSize > settings.total ? settings.total : settings.pageIndex * settings.pageSize)).replace(/{total}/, settings.total)).appendTo(this);
129     };
130     $.fn.slpagination.methods = {
131         getPageSize : function(slpagination) {
132             return $("input:eq(0)", slpagination).val();
133         },
134         getPageIndex : function(slpagination) {
135             return $("input:eq(1)", slpagination).val();
136         }
137     };
138     $.fn.slpagination.defaults = {
139         css : "slpagination",
140         style : "",
141         total : 0,
142         pageSize : 10,
143         pageIndex : 1,
144         beforePageText : "page",
145         afterPageText : "of {pageCount}",
146         displayMsg : "display {from} to {to} of {total} items",
147         onChangePageSize : function(pageSize) {
148         },
149         onSelectPage : function(pageIndex) {
150         }
151     };
152 })(jQuery);

View Code

slpagination.css

 1 div,input,span {
 2     margin: 0; padding: 0;font-family:verdana;font-size:12px;
 3 }
 4 
 5 .slpagination {
 6     width: auto; background-color: #EFEFEF; padding: 4px 0 3px 0;
 7 }
 8 
 9 .slpagination-button-enter {
10     font-weight: bold;
11 }

View Code

testslpagination.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <link rel="stylesheet" href="/css/streamlineui/slpagination.css" />
 7 <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
 8 <script type="text/javascript" src="/js/streamlineui/slpagination.js"></script>
 9 </head>
10 <body>
11     <div id="sl"></div>
12     <script type="text/javascript">
13         $(function() {
14             $("#sl").slpagination({
15                 onChangePageSize : function(pageSize) {
16                     alert(pageSize);
17                 },
18                 onSelectPage:function(pageIndex){
19                     alert(pageIndex);
20                 }
21             });
22         });
23     </script>
24 </body>
25 </html>

View Code

API文档

属性：

属性名	属性值类型	描述	默认值
css	string	使用的class样式	slpagination
style	string	应用的样式	空字符串
total	int	总记录数	0
pageSize	int	一页显示记录数	10
pageIndex	int	当前显示的页码	1
beforePageText	string	页码前面的文字	page
afterPageText	string	页码后面的文字	of {pageCount}
displayMsg	string	显示文字	display {from} to {to} of {total} items

事件：

事件名	参数	描述
onSelectPage	pageIndex	选择一个新页面的时候触发
onChangePageSize	pageSize	在页面更改页面大小的时候触发

方法：

方法名	参数	描述
getPageSize	无	获取每页显示的记录数 $("#pg").slpagination("getPageSize")
getPageIndex	无	获取当前显示的页码 $("#pg").slpagination("getPageIndex")