slpagination
效果：
slpagination.js
(function($) {
$.fn.slpagination = function(options, params) {
$.extend($.fn.slpagination.defaults, options);
$(this).attr({
"class" : $.fn.slpagination.defaults.css,
style : $.fn.slpagination.defaults.style
});
$(this).empty();
var pageCount = $.fn.slpagination.defaults.total / $.fn.slpagination.defaults.pageSize;
pageCount = pageCount * $.fn.slpagination.defaults.pageSize > $.fn.slpagination.defaults.total ? pageCount : (pageCount + 1);
$("<input>", {
id : "slpagination_pagesize",
type : "text",
style : "margin:3px 0 3px 10px;width:30px;",
value : $.fn.slpagination.defaults.pageSize,
blur : function() {
var r = /^[0-9]*[1-9][0-9]*$/;
if (r.test($(this).val())) {
$.fn.slpagination.defaults.pageSize = $(this).val();
$.fn.slpagination.defaults.onChangePageSize($(this).val());
} else {
$(this).val($.fn.slpagination.defaults.pageSize);
}
}
}).appendTo(this);
$("<span>", {
id : "slpagination_firstpage",
style : "cursor:pointer;margin:0 0 0 10px;",
mouseenter : function() {
$(this).addClass("slpagination-button-enter");
},
mouseleave : function() {
$(this).removeClass("slpagination-button-enter");
},
click : function() {
$.fn.slpagination.defaults.pageIndex = 1;
$("#slpagination_pageindex").val(1);
$.fn.slpagination.defaults.onSelectPage(1);
}
}).text("<<").appendTo(this);
$("<span>", {
id : "slpagination_previouspage",
style : "cursor:pointer;margin:0 0 0 10px;",
mouseenter : function() {
$(this).addClass("slpagination-button-enter");
},
mouseleave : function() {
$(this).removeClass("slpagination-button-enter");
},
click : function() {
$.fn.slpagination.defaults.pageIndex--;
if ($.fn.slpagination.defaults.pageIndex <= 0) {
$.fn.slpagination.defaults.pageIndex = 1;
}
$("#slpagination_pageindex").val($.fn.slpagination.defaults.pageIndex);
$.fn.slpagination.defaults.onSelectPage($.fn.slpagination.defaults.pageIndex);
}
}).text("<").appendTo(this);
$("<span>", {
style : "margin:0 0 0 20px;"
}).text($.fn.slpagination.defaults.beforePageText).appendTo(this);
$("<input>", {
id : "slpagination_pageindex",
type : "text",
style : "margin:0 0 0 3px;width:30px;",
value : $.fn.slpagination.defaults.pageIndex,
blur : function() {
var r = /^[0-9]*[1-9][0-9]*$/;
if (r.test($(this).val())) {
if ($(this).val() > pageCount) {
$(this).val(pageCount);
}
$.fn.slpagination.defaults.pageIndex = $(this).val();
$.fn.slpagination.defaults.onSelectPage($(this).val());
} else {
$(this).val($.fn.slpagination.defaults.pageIndex);
}
}
}).appendTo(this);
$("<span>", {
style : "margin:0 0 0 3px;",
}).text($.fn.slpagination.defaults.afterPageText.replace(/{pageCount}/, pageCount)).appendTo(this);
$("<span>", {
id : "slpagination_nextpage",
style : "cursor:pointer;margin:0 0 0 10px;",
mouseenter : function() {
$(this).addClass("slpagination-button-enter");
},
mouseleave : function() {
$(this).removeClass("slpagination-button-enter");
},
click : function() {
$.fn.slpagination.defaults.pageIndex++;
if ($.fn.slpagination.defaults.pageIndex > pageCount) {
$.fn.slpagination.defaults.pageIndex = pageCount;
}
$("#slpagination_pageindex").val($.fn.slpagination.defaults.pageIndex);
$.fn.slpagination.defaults.onSelectPage($.fn.slpagination.defaults.pageIndex);
}
}).text(">").appendTo(this);
$("<span>", {
id : "slpagination_lastpage",
style : "cursor:pointer;margin:0 0 0 10px;",
mouseenter : function() {
$(this).addClass("slpagination-button-enter");
},
mouseleave : function() {
$(this).removeClass("slpagination-button-enter");
},
click : function() {
$.fn.slpagination.defaults.pageIndex = pageCount;
$("#slpagination_pageindex").val($.fn.slpagination.defaults.pageIndex);
$.fn.slpagination.defaults.onSelectPage($.fn.slpagination.defaults.pageIndex);
}
}).text(">>").appendTo(this);
$("<span>", {
style : "margin:0 0 0 20px;"
}).text($.fn.slpagination.defaults.displayMsg.replace(/{from}/, ($.fn.slpagination.defaults.pageIndex - 1) * $.fn.slpagination.defaults.pageSize).replace(/{to}/, $.fn.slpagination.defaults.pageIndex * $.fn.slpagination.defaults.pageSize).replace(/{total}/, $.fn.slpagination.defaults.total)).appendTo(this);
};
$.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
.slpagination {
width: auto; background-color: #EFEFEF;
}
.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 | 在页面更改页面大小的时候触发 |
jQuery之自定义pagination控件,布布扣,bubuko.com