easyui源码翻译1.32--Pagination（分页）

前言

使用$.fn.pagination.defaults重写默认值对象下载该插件翻译源码

该分页控件允许用户导航页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以在分页控件上添加自定义按钮，以增强其功能。

源码

/**
 * jQuery EasyUI 1.3.2
 * 
 *翻译：qq 1364386878
 */
(function ($) {
    //创建工具条
    function buildToolbar(target) {
        var pagination = $.data(target, "pagination");
        var opts = pagination.options;
        var bb = pagination.bb = {};
        var tb = $(target).addClass("pagination").html("<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tr></tr></table>");
        var tr = tb.find("tr");

        function getpaginationbar(name) {
            var pagination = opts.nav[name];//获取按钮组
            
            var a = $("<a href=\"javascript:void(0)\"></a>").appendTo(tr);
            a.wrap("<td></td>");
            a.linkbutton({
                iconCls: pagination.iconCls,
                plain: true
            }).unbind(".pagination").bind("click.pagination", function () {
                pagination.handler.call(target);
            });
            return a;
        };
        if (opts.showPageList) {
            var ps = $("<select class=\"pagination-page-list\"></select>");
            ps.bind("change", function () {
                opts.pageSize = parseInt($(this).val());
                opts.onChangePageSize.call(target, opts.pageSize);
                _select(target, opts.pageNumber);
            });
            for (var i = 0; i < opts.pageList.length; i++) {
                $("<option></option>").text(opts.pageList[i]).appendTo(ps);
            }
            $("<td></td>").append(ps).appendTo(tr);
            $("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
        }
        bb.first = getpaginationbar("first");
        bb.prev = getpaginationbar("prev");
        $("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
        $("<span style=\"padding-left:6px;\"></span>").html(opts.beforePageText).appendTo(tr).wrap("<td></td>");
        bb.num = $("<input class=\"pagination-num\" type=\"text\" value=\"1\" size=\"2\">").appendTo(tr).wrap("<td></td>");
        bb.num.unbind(".pagination").bind("keydown.pagination",
           function (e) {
            if (e.keyCode == 13) {
                var page = parseInt($(this).val()) || 1;              
                _select(target, page);//选择一个新页面 page索引
                return false;
            }
        });
        bb.after = $("<span style=\"padding-right:6px;\"></span>").appendTo(tr).wrap("<td></td>");
        $("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
        bb.next = getpaginationbar("next");
        bb.last = getpaginationbar("last");
        if (opts.showRefresh) {
            $("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
            bb.refresh = getpaginationbar("refresh");
        }
        if (opts.buttons) {
            $("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
            for (var i = 0; i < opts.buttons.length; i++) {
                var btnopts = opts.buttons[i];
               
                if (btnopts == "-") {
                    $("<td><div class=\"pagination-btn-separator\"></div></td>").appendTo(tr);
                } else {
                    var td = $("<td></td>").appendTo(tr);
                    $("<a href=\"javascript:void(0)\"></a>").appendTo(td).linkbutton($.extend(btnopts, { plain: true })).bind("click", eval(btnopts.handler || function () {
                    }));
                }
            }
        }
        $("<div class=\"pagination-info\"></div>").appendTo(tb);
        $("<div style=\"clear:both;\"></div>").appendTo(tb);
    };
    //选择一个新页面
    function _select(target, page) {
        var opts = $.data(target, "pagination").options;
        var pageCount = Math.ceil(opts.total / opts.pageSize) || 1;
        opts.pageNumber = page;
        if (opts.pageNumber < 1) {
            opts.pageNumber = 1;
        }
        if (opts.pageNumber > pageCount) {
            opts.pageNumber = pageCount;
        }
        _refresh(target, { pageNumber: opts.pageNumber });
        opts.onSelectPage.call(target, opts.pageNumber, opts.pageSize);
    };
    //刷新并显示分页栏信息
    function _refresh(target, options) {
        var opts = $.data(target, "pagination").options;
        var bb = $.data(target, "pagination").bb;
       
        $.extend(opts, options || {});
        var ps = $(target).find("select.pagination-page-list");
        if (ps.length) {
            ps.val(opts.pageSize + "");
            opts.pageSize = parseInt(ps.val());
        }
        var pageCount = Math.ceil(opts.total / opts.pageSize) || 1;
        bb.num.val(opts.pageNumber);
        bb.after.html(opts.afterPageText.replace(/{pages}/, pageCount));
        var pinfo = opts.displayMsg;
        pinfo = pinfo.replace(/{from}/, opts.total == 0 ? 0 : opts.pageSize * (opts.pageNumber - 1) + 1);
        pinfo = pinfo.replace(/{to}/, Math.min(opts.pageSize * (opts.pageNumber), opts.total));
        pinfo = pinfo.replace(/{total}/, opts.total);
        $(target).find("div.pagination-info").html(pinfo);
        bb.first.add(bb.prev).linkbutton({ disabled: (opts.pageNumber == 1) });
        bb.next.add(bb.last).linkbutton({ disabled: (opts.pageNumber == pageCount) });
        _loading(target, opts.loading);
    };
    //提醒分页控件正在加载中
    function _loading(target, Msg) {
        var opts = $.data(target, "pagination").options;
        var bb = $.data(target, "pagination").bb;
        opts.loading = Msg;
        if (opts.showRefresh) {
            if (opts.loading) {
                bb.refresh.linkbutton({ iconCls: "pagination-loading" });
            } else {
                bb.refresh.linkbutton({ iconCls: "pagination-load" });
            }
        }
    };
    //实例化
    $.fn.pagination = function (options, param) {
        if (typeof options == "string") {
            return $.fn.pagination.methods[options](this, param);
        }
        options = options || {};
        return this.each(function () {
            var opts;
            var state = $.data(this, "pagination");
            if (state) {
                opts = $.extend(state.options, options);
            } else {
                opts = $.extend({}, $.fn.pagination.defaults, $.fn.pagination.parseOptions(this), options);
                $.data(this, "pagination", { options: opts });
            }
            buildToolbar(this);
            _refresh(this);
        });
    };
    //默认方法
    $.fn.pagination.methods = {
        //返回参数对象
        options: function (jq) {
            return $.data(jq[0], "pagination").options;
        },
        //提醒分页控件正在加载中
        loading: function (jq) {
            return jq.each(function () {
                _loading(this, true);
            });
        },
        //提醒分页控件加载完成
        loaded: function (jq) {
            return jq.each(function () {
                _loading(this, false);
            });
        },
        //刷新并显示分页栏信息
        refresh: function (jq, options) {
            return jq.each(function () {
                _refresh(this, options);
            });
        },
        //选择一个新页面，页面索引从1开始
        select: function (jq, page) {
            return jq.each(function () {
                _select(this, page);
            });
        }
    };
    //解析器配置
    $.fn.pagination.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.parser.parseOptions(target, [{ total: "number", pageSize: "number", pageNumber: "number" },
            { loading: "boolean", showPageList: "boolean", showRefresh: "boolean" }]),
            { pageList: (t.attr("pageList") ? eval(t.attr("pageList")) : undefined) });
    };
    //默认属性 事件
    $.fn.pagination.defaults = {
        total: 1,//总记录数，在分页控件创建时初始的值
        pageSize: 10,//页面大小
        pageNumber: 1,//在分页控件创建的时候显示的页数
        pageList: [10, 20, 30, 50],//用户可以改变页面大小。pageList属性定义了页面导航展示的页码
        loading: false,//定义数据是否正在载入
        //自定义按钮，每个按钮都有2个属性：
        //iconCls：显示背景图片的CSS类ID  handler：当按钮被点击时调用的一个句柄函数
        buttons: null,        
        showPageList: true,//定义是否显示页面导航列表
        showRefresh: true,//定义是否显示刷新按钮
        //用户选择一个新页面的时候触发。回调函数包含2个参数：
        //pageNumber：新的页数。      pageSize: 页面大小（每页显示的条数）。 
        onSelectPage: function (pageNumber, pageSize) {
        },
        //在点击刷新按钮刷新之前触发，返回false可以取消刷新动作
        onBeforeRefresh: function (pageNumber, pageSize) {
        },
        //刷新之后触发
        onRefresh: function (pageNumber, pageSize) {
        },
        //在页面更改页面大小的时候触发
        onChangePageSize: function (pageSize) {
        },
        //定义是否显示刷新按钮
        beforePageText: "Page",
        //定义是否显示刷新按钮
        afterPageText: "of {pages}",
        //显示页面信息
        displayMsg: "Displaying {from} to {to} of {total} items", nav: {
            first: {
                iconCls: "pagination-first", handler: function () {
                    var opts = $(this).pagination("options");
                    if (opts.pageNumber > 1) {
                        $(this).pagination("select", 1);
                    }
                }
            },

            prev: {
                iconCls: "pagination-prev", handler: function () {
                    var opts = $(this).pagination("options");
                    if (opts.pageNumber > 1) {
                        $(this).pagination("select", opts.pageNumber - 1);
                    }
                }
            },

            next: {
                iconCls: "pagination-next", handler: function () {
                    var opts = $(this).pagination("options");
                    var pageCount = Math.ceil(opts.total / opts.pageSize);
                    if (opts.pageNumber < pageCount) {
                        $(this).pagination("select", opts.pageNumber + 1);
                    }
                }
            },

            last: {
                iconCls: "pagination-last", handler: function () {
                    var opts = $(this).pagination("options");
                    var pageCount = Math.ceil(opts.total / opts.pageSize);
                    if (opts.pageNumber < pageCount) {
                        $(this).pagination("select", pageCount);
                    }
                }
            },

            refresh: {
                iconCls: "pagination-refresh", handler: function () {
                    var opts = $(this).pagination("options");
                    if (opts.onBeforeRefresh.call(this, opts.pageNumber, opts.pageSize) != false) {
                        $(this).pagination("select", opts.pageNumber);
                        opts.onRefresh.call(this, opts.pageNumber, opts.pageSize);
                    }
                }
            }
        }
    };
})(jQuery);

 

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Pagination - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
    <script src="../../plugins2/jquery.parser.js"></script>
    <script src="../../plugins2/jquery.linkbutton.js"></script>
    <script src="../../plugins2/jquery.pagination.js"></script>
</head>
<body>
    <h2>Basic Pagination</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>The user can change page number and page size on page bar.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <div class="easyui-pagination" data-options="total:114" style="border:1px solid #ddd;"></div>
</body>
</html>

 

插件效果