page.js 6.29 KB
/**
 * Jquery 分页插件
 *
 * Created by Alex Yang
 */
jQuery.fn.page = function (maxentries, opts) {
    opts = jQuery.extend({
        items_per_page: 10, //每页显示几条
        num_display_entries: 10, //显示几页
        current_page: 0, //当前页,begin:0
        num_edge_entries: 0, //边缘显示数
        link_to: "javascript:;", //分页url
        prev_text: "<",
        next_text: ">",
        info_text: "第{0}页/共{1}页",
        ellipse_text: "...", //当边缘数!=0时,显示的分割文字
        current_class: "", //选中页样式
        next_class: "next", //下一页样式
        prev_class: "prev", //上一页样式
        info_class: "",
        prev_show_always: false, //是否显示上一页
        next_show_always: false, //是否显示下一页
        info_show_always: true,
        load_first_page: false,
        first_page_show: true, //只有一页是否显示分页信息
        callback: function () {
            return true;
        }
    }, opts || {});

    return this.each(function () {
        /**
         * 计算最大页数
         */
        function numPages() {
            return Math.ceil(maxentries / opts.items_per_page);
        }

        function getInterval() {
            var ne_half = Math.ceil(opts.num_display_entries / 2);
            var np = numPages();
            var upper_limit = np - opts.num_display_entries;
            var start = current_page > ne_half ? Math.max(Math.min(current_page - ne_half, upper_limit), 0) : 0;
            var end = current_page > ne_half ? Math.min(current_page + ne_half - 1, np) : Math.min(opts.num_display_entries, np);
            return [start, end];
        }

        function pageSelected(page_id, evt) {
            current_page = page_id;
            drawLinks();
            var continuePropagation = opts.callback(page_id, panel);
            if (!continuePropagation) {
                if (evt.stopPropagation) {
                    evt.stopPropagation();
                }
                else {
                    evt.cancelBubble = true;
                }
            }
            return continuePropagation;
        }


        function drawLinks() {
            panel.empty();
            var interval = getInterval();
            var np = numPages();

            if (np && np <= 1 && !opts.first_page_show) {
                return;
            }

            var getClickHandler = function (page_id) {
                return function (evt) {
                    return pageSelected(page_id, evt);
                }
            };

            var appendItem = function (page_id, appendopts) {
                page_id = page_id < 0 ? 0 : (page_id < np ? page_id : np - 1);
                appendopts = jQuery.extend({text: page_id + 1, classes: ""}, appendopts || {});
                if (page_id == current_page) {
                    var lnk = jQuery("<b class='" + opts.current_class + "'>" + (appendopts.text) + "</b>");
                }
                else {
                    var lnk = jQuery("<a>" + (appendopts.text) + "</a>")
                        .bind("click", getClickHandler(page_id))
                        .attr('href', opts.link_to.replace("{id}", (page_id)));


                }
                if (appendopts.classes) {
                    lnk.addClass(appendopts.classes);
                }
                panel.append(lnk);

                //fix 样式空隙 bug
                panel.append(" ");
            };
            // 生成上一页按钮
            if (opts.prev_text && (current_page > 0 || opts.prev_show_always)) {
                appendItem(current_page - 1, {text: opts.prev_text, classes: opts.prev_class});
            }
            // 生成起始页
            if (interval[0] > 0 && opts.num_edge_entries > 0) {
                var end = Math.min(opts.num_edge_entries, interval[0]);
                for (var i = 0; i < end; i++) {
                    appendItem(i);
                }
                if (opts.num_edge_entries < interval[0] && opts.ellipse_text) {
                    jQuery("<em>" + opts.ellipse_text + "</em>").appendTo(panel);
                }
            }
            // 生成分页区间
            for (var i = interval[0]; i < interval[1]; i++) {
                appendItem(i);
            }
            // 生成结束页
            if (interval[1] < np && opts.num_edge_entries > 0) {
                if (np - opts.num_edge_entries > interval[1] && opts.ellipse_text) {
                    jQuery("<em>" + opts.ellipse_text + "</em>").appendTo(panel);
                }
                var begin = Math.max(np - opts.num_edge_entries, interval[1]);
                for (var i = begin; i < np; i++) {
                    appendItem(i);
                }

            }
            // 生成下一页按钮
            if (opts.next_text && (current_page < np - 1 || opts.next_show_always)) {
                appendItem(current_page + 1, {text: opts.next_text, classes: opts.next_class});
            }

            // 生成页面信息
            if (opts.info_show_always) {
                var info = jQuery("<span class='" + opts.info_class + "'>" + (opts.info_text.replace("{0}", current_page + 1).replace("{1}", np)) + "</span>");
                panel.append(info);
            }
        }


        var current_page = opts.current_page;
        maxentries = (!maxentries || maxentries < 0) ? 1 : maxentries;
        opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0) ? 1 : opts.items_per_page;

        var panel = jQuery(this);

        this.numPages = function () {
            return numPages();
        }
        this.selectPage = function (page_id) {
            pageSelected(page_id);
        }
        this.prevPage = function () {
            if (current_page > 0) {
                pageSelected(current_page - 1);
                return true;
            }
            else {
                return false;
            }
        }
        this.nextPage = function () {
            if (current_page < numPages() - 1) {
                pageSelected(current_page + 1);
                return true;
            }
            else {
                return false;
            }
        }
        // 初始化
        drawLinks();
        // 执行回掉函数
        if (opts.load_first_page) {
            opts.callback(current_page, this);
        }
    });
}