jQuery之自定义pagination控件

slpagination

效果：

slpagination.js

(function($) {
    $.fn.slpagination = function(options, params) {
        if ($.type(options) == "string") {
            var method = $.fn.slpagination.methods[options];
            if (method) {
                return method(this, params);
            } else {
                return null;
            }
        }
        var settings = {};
        $.extend(settings, $.fn.slpagination.defaults, options);
        $(this).data("settings", settings);
        $(this).attr({
            "class" : settings.css,
            style : settings.style
        });
        $(this).empty();
        if (settings.total == 0) {
            settings.total = settings.pageSize;
        }
        var pageCount = parseInt(settings.total / settings.pageSize);
        pageCount = pageCount * settings.pageSize >= settings.total ? pageCount : (pageCount + 1);
        $("<input>", {
            type : "text",
            style : "margin:0 0 0 3px;30px;float:left;",
            value : settings.pageSize,
            blur : function() {
                var r = /^[0-9]*[1-9][0-9]*$/;
                if (r.test($(this).val())) {
                    settings.pageIndex = 1;
                    $("input:eq(1)", $(this).parent()).val(1);
                    settings.pageSize = $(this).val();
                    settings.onChangePageSize($(this).val());
                } else {
                    $(this).val(settings.pageSize);
                }

            }
        }).appendTo(this);
        $("<span>", {
            style : "cursor:pointer;margin:0 0 0 10px;",
            mouseenter : function() {
                $(this).addClass("slpagination-button-enter");
            },
            mouseleave : function() {
                $(this).removeClass("slpagination-button-enter");
            },
            click : function() {
                settings.pageIndex = 1;
                $("input:eq(1)", $(this).parent()).val(1);
                settings.onSelectPage(1);
            }
        }).text("<<").appendTo(this);
        $("<span>", {
            style : "cursor:pointer;margin:0 0 0 10px;",
            mouseenter : function() {
                $(this).addClass("slpagination-button-enter");
            },
            mouseleave : function() {
                $(this).removeClass("slpagination-button-enter");
            },
            click : function() {
                settings.pageIndex--;
                if (settings.pageIndex <= 0) {
                    settings.pageIndex = 1;
                }
                $("input:eq(1)", $(this).parent()).val(settings.pageIndex);
                settings.onSelectPage(settings.pageIndex);
            }
        }).text("<").appendTo(this);
        $("<span>", {
            style : "margin:0 0 0 20px;"
        }).text(settings.beforePageText).appendTo(this);
        $("<input>", {
            type : "text",
            style : "margin:0 0 0 3px;30px;",
            value : settings.pageIndex,
            blur : function() {
                var r = /^[0-9]*[1-9][0-9]*$/;
                if (r.test($(this).val())) {
                    if ($(this).val() > pageCount) {
                        $(this).val(pageCount);
                    }
                    settings.pageIndex = $(this).val();
                    settings.onSelectPage($(this).val());
                } else {
                    $(this).val(settings.pageIndex);
                }
            }
        }).appendTo(this);
        $("<span>", {
            style : "margin:0 0 0 3px;"
        }).text(settings.afterPageText.replace(/{pageCount}/, pageCount)).appendTo(this);
        $("<span>", {
            style : "cursor:pointer;margin:0 0 0 10px;",
            mouseenter : function() {
                $(this).addClass("slpagination-button-enter");
            },
            mouseleave : function() {
                $(this).removeClass("slpagination-button-enter");
            },
            click : function() {
                settings.pageIndex++;
                if (settings.pageIndex > pageCount) {
                    settings.pageIndex = pageCount;
                }
                $("input:eq(1)", $(this).parent()).val(settings.pageIndex);
                settings.onSelectPage(settings.pageIndex);
            }
        }).text(">").appendTo(this);
        $("<span>", {
            style : "cursor:pointer;margin:0 0 0 10px;",
            mouseenter : function() {
                $(this).addClass("slpagination-button-enter");
            },
            mouseleave : function() {
                $(this).removeClass("slpagination-button-enter");
            },
            click : function() {
                settings.pageIndex = pageCount;
                $("input:eq(1)", $(this).parent()).val(settings.pageIndex);
                settings.onSelectPage(settings.pageIndex);
            }
        }).text(">>").appendTo(this);
        $("<span>", {
            style : "margin:0 0 0 100px;clear:right;"
        }).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);
    };
    $.fn.slpagination.methods = {
        getPageSize : function(slpagination) {
            return $("input:eq(0)", slpagination).val();
        },
        getPageIndex : function(slpagination) {
            return $("input:eq(1)", slpagination).val();
        }
    };
    $.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

div,input,span {
    margin: 0; padding: 0;font-family:verdana;font-size:12px;
}

.slpagination {
    width: auto; background-color: #EFEFEF; padding: 4px 0 3px 0;
}

.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	在页面更改页面大小的时候触发

 

方法：

 

方法名	参数	描述
getPageSize	无	获取每页显示的记录数 $("#pg").slpagination("getPageSize")
getPageIndex	无	获取当前显示的页码 $("#pg").slpagination("getPageIndex")