首页 > 代码库 > jQuery之自定义pagination控件
jQuery之自定义pagination控件
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 | 在页面更改页面大小的时候触发 |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。