jQuery之自定义pagination控件
2020-12-13 03:07
标签：style blog class code java c slpagination 效果： slpagination.js slpagination.css testslpagination.html jQuery之自定义pagination控件,搜素材,soscw.com jQuery之自定义pagination控件 标签：style blog class code java c 原文地址：http://www.cnblogs.com/sydeveloper/p/3723928.html
(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);
$("", {
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);
$("", {
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("this);
$("", {
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 ) {
$.fn.slpagination.defaults.pageIndex = 1;
}
$("#slpagination_pageindex").val($.fn.slpagination.defaults.pageIndex);
$.fn.slpagination.defaults.onSelectPage($.fn.slpagination.defaults.pageIndex);
}
}).text("this);
$("", {
style : "margin:0 0 0 20px;"
}).text($.fn.slpagination.defaults.beforePageText).appendTo(this);
$("", {
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);
$("", {
style : "margin:0 0 0 3px;",
}).text($.fn.slpagination.defaults.afterPageText.replace(/{pageCount}/, pageCount)).appendTo(this);
$("", {
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);
$("", {
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);
$("", {
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 {
width: auto; background-color: #EFEFEF;
}
.slpagination-button-enter {
font-weight: bold;
}
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 heretitle>
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
在页面更改页面大小的时候触发
上一篇：python 安装surprise库解决 c++tools错误问题
下一篇：vue调用组件，组件回调给data中的数组赋值，报错Invalid prop type check failed for prop value. Expecte