jQuery之自定义pagination控件

浏览数：26 / 时间：2015年06月09日

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