pagination 扩展使用

本文章摘编、转载需要注明来源 http://write.blog.youkuaiyun.com/postedit/8570591

pagination是jQuery的一个plugin,效果不错,但是由于缺少跳转跟记录数显示的功能,然后就修改了下源码

原本插件效果

修改后的插件效果(可以在参数里设置不显示增加的修改,默认显示)

先增加几个参数

opts = jQuery.extend({
        items_per_page:10,
        num_display_entries:10,
        current_page:0,
        num_edge_entries:0,
        link_to:"#",
        prev_text:"Prev",
        next_text:"Next",
        jump_text:"Jump",
        isSum:true,
        isJump:true,
        jump_format_text:"The number format error",
        jump_outofrange_text:"The number is out of range",
        jump_null_text:"The number is not allow null",
        ellipse_text:"...",
        prev_show_always:true,
        next_show_always:true,
        callback:function(){return true;}
    },opts||{});

然后找到drawLinks(这个方法主要是描绘分页导航)加入我们自己的一些逻辑方法

function drawLinks() {
            panel.empty();
            var interval = getInterval();
            var np = numPages();
            // This helper function returns a handler function that calls pageSelected with the right page_id
            var getClickHandler = function(page_id) {
                return function(evt){ return pageSelected(page_id,evt); }
            }
            // Helper function for generating a single link (or a span tag if it's the current page)
            var appendItem = function(page_id, appendopts){
                page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
                appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
                if(page_id == current_page){
                    var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");
                }
                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);
            }
            // sum total
            if(opts.isSum){
                panel.append("<a>共 "+maxentries+" 条记录</a>");
            }
            // Generate "Previous"-Link
            if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
                appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
            }
            // Generate starting points
            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("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
                }
            }
            // Generate interval links
            for(var i=interval[0]; i<interval[1]; i++) {
                appendItem(i);
            }
            // Generate ending points
            if (interval[1] < np && opts.num_edge_entries > 0)
            {
                if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
                {
                    jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
                }
                var begin = Math.max(np-opts.num_edge_entries, interval[1]);
                for(var i=begin; i<np; i++) {
                    appendItem(i);
                }
            }
            // Generate "Next"-Link
            if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
                appendItem(current_page+1,{text:opts.next_text, classes:"next"});
            }
            if(opts.isJump){
                // Generate Jump Input
                panel.append(jQuery("<input type='text' id='jump-index' maxlength='4'/>"));
                // Generate Jump Handler
                var index = null;
                var jump = jQuery("<a>"+opts.jump_text+"</a>").bind("click",function(evt){
                    var jumpinput = jQuery("#jump-index");
                    index = jumpinput.val();
                    if(index == null || index == ""){
                        alert(opts.jump_null_text);
                        return;
                    }
                    if(/^\d+$/.test(index)){
                        if(index > numPages() || index < 1){
                            alert(opts.jump_outofrange_text);
                            jumpinput.val("");
                            return;
                        }
                        index-=1;
                        return pageSelected(index,evt);
                    }else{
                        alert(opts.jump_format_text);
                        jumpinput.val("");
                        return;
                    }
                }).attr("href", opts.link_to.replace(/__id__/,index));
                panel.append(jump);
            }
        }

下载地址:完整demo