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 $("", { 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 $("", { 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 $("", { 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 $("", { 73 style : "margin:0 0 0 20px;" 74 }).text(settings.beforePageText).appendTo(this); 75 $("", { 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 $("", { 93 style : "margin:0 0 0 3px;" 94 }).text(settings.afterPageText.replace(/{pageCount}/, pageCount)).appendTo(this); 95 $("", { 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 $("", {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 $("", {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); 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 } testslpagination.html
1 2 3 4 5Insert title here 6 7 8 9 10 11 12 24 25
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") |