jQuery之自定义pagination控件

效果：

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;width: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;width: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