jQuery之自定义pagination控件

slpagination

效果：

slpagination.js

 (function($) {
     $.fn.slpagination = function(options, params) {
         if ($.type(options) == "string") {
             var method = $.fn.slpagination.methods[options];
             if (method) {
                 return method(this, params);
             } else {
                 return null;
             }
         }
         var settings = {};
         $.extend(settings, $.fn.slpagination.defaults, options);
         $(this).data("settings", settings);
         $(this).attr({
             "class" : settings.css,
             style : settings.style
         });
         $(this).empty();
         if (settings.total == 0) {
             settings.total = settings.pageSize;
         }
         var pageCount = parseInt(settings.total / settings.pageSize);
         pageCount = pageCount * settings.pageSize >= settings.total ? pageCount : (pageCount + 1);
         $("<input>", {
             type : "text",
             style : "margin:0 0 0 3px;width:30px;float:left;",
             value : settings.pageSize,
             blur : function() {
                 var r = /^[0-9]*[1-9][0-9]*$/;
                 if (r.test($(this).val())) {
                     settings.pageIndex = 1;
                     $("input:eq(1)", $(this).parent()).val(1);
                     settings.pageSize = $(this).val();
                     settings.onChangePageSize($(this).val());
                 } else {
                     $(this).val(settings.pageSize);
                 }

             }
         }).appendTo(this);
         $("<span>", {
             style : "cursor:pointer;margin:0 0 0 10px;",
             mouseenter : function() {
                 $(this).addClass("slpagination-button-enter");
             },
             mouseleave : function() {
                 $(this).removeClass("slpagination-button-enter");
             },
             click : function() {
                 settings.pageIndex = 1;
                 $("input:eq(1)", $(this).parent()).val(1);
                 settings.onSelectPage(1);
             }
         }).text("<<").appendTo(this);
         $("<span>", {
             style : "cursor:pointer;margin:0 0 0 10px;",
             mouseenter : function() {
                 $(this).addClass("slpagination-button-enter");
             },
             mouseleave : function() {
                 $(this).removeClass("slpagination-button-enter");
             },
             click : function() {
                 settings.pageIndex--;
                 if (settings.pageIndex <= 0) {
                     settings.pageIndex = 1;
                 }
                 $("input:eq(1)", $(this).parent()).val(settings.pageIndex);
                 settings.onSelectPage(settings.pageIndex);
             }
         }).text("<").appendTo(this);
         $("<span>", {
             style : "margin:0 0 0 20px;"
         }).text(settings.beforePageText).appendTo(this);
         $("<input>", {
             type : "text",
             style : "margin:0 0 0 3px;width:30px;",
             value : settings.pageIndex,
             blur : function() {
                 var r = /^[0-9]*[1-9][0-9]*$/;
                 if (r.test($(this).val())) {
                     if ($(this).val() > pageCount) {
                         $(this).val(pageCount);
                     }
                     settings.pageIndex = $(this).val();
                     settings.onSelectPage($(this).val());
                 } else {
                     $(this).val(settings.pageIndex);
                 }
             }
         }).appendTo(this);
         $("<span>", {
             style : "margin:0 0 0 3px;"
         }).text(settings.afterPageText.replace(/{pageCount}/, pageCount)).appendTo(this);
         $("<span>", {
             style : "cursor:pointer;margin:0 0 0 10px;",
             mouseenter : function() {
                 $(this).addClass("slpagination-button-enter");
             },
             mouseleave : function() {
                 $(this).removeClass("slpagination-button-enter");
             },
             click : function() {
                 settings.pageIndex++;
                 if (settings.pageIndex > pageCount) {
                     settings.pageIndex = pageCount;
                 }
                 $("input:eq(1)", $(this).parent()).val(settings.pageIndex);
                 settings.onSelectPage(settings.pageIndex);
             }
         }).text(">").appendTo(this);
         $("<span>", {
             style : "cursor:pointer;margin:0 0 0 10px;",
             mouseenter : function() {
                 $(this).addClass("slpagination-button-enter");
             },
             mouseleave : function() {
                 $(this).removeClass("slpagination-button-enter");
             },
             click : function() {
                 settings.pageIndex = pageCount;
                 $("input:eq(1)", $(this).parent()).val(settings.pageIndex);
                 settings.onSelectPage(settings.pageIndex);
             }
         }).text(">>").appendTo(this);
         $("<span>", {
             style : "margin:0 0 0 100px;clear:right;"
         }).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);
     };
     $.fn.slpagination.methods = {
         getPageSize : function(slpagination) {
             return $("input:eq(0)", slpagination).val();
         },
         getPageIndex : function(slpagination) {
             return $("input:eq(1)", slpagination).val();
         }
     };
     $.fn.slpagination.defaults = {
         css : "slpagination",
         style : "",
         total : 0,
         pageSize : 10,
         pageIndex : 1,
         beforePageText : "page",
         afterPageText : "of {pageCount}",
         displayMsg : "display {from} to {to} of {total} items",
         onChangePageSize : function(pageSize) {
         },
         onSelectPage : function(pageIndex) {
         }
     };
 })(jQuery);

slpagination.css

 div,input,span {
     margin:; padding:;font-family:verdana;font-size:12px;
 }

 .slpagination {
     width: auto; background-color: #EFEFEF; padding: 4px 0 3px 0;
 }

 .slpagination-button-enter {
     font-weight: bold;
 }

testslpagination.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
 <link rel="stylesheet" href="/css/streamlineui/slpagination.css" />
 <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="/js/streamlineui/slpagination.js"></script>
 </head>
 <body>
     <div id="sl"></div>
     <script type="text/javascript">
         $(function() {
             $("#sl").slpagination({
                 onChangePageSize : function(pageSize) {
                     alert(pageSize);
                 },
                 onSelectPage:function(pageIndex){
                     alert(pageIndex);
                 }
             });
         });
     </script>
 </body>
 </html>

---

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")