pagination 扩展使用

简介: 本文章摘编、转载需要注明来源 http://write.blog.csdn.net/postedit/8570591pagination是jQuery的一个plugin,效果不错,但是...

本文章摘编、转载需要注明来源 http://write.blog.csdn.net/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

目录
相关文章
|
5月前
Vue2分页(Pagination)
本文介绍了如何在 Vue3 中创建一个自定义分页组件(Pagination)。该组件支持传入多个参数,如当前页数、每页条数、是否隐藏单页分页等,并提供了丰富的功能,包括快速跳转、显示数据总量及分页器位置调整。通过示例代码展示了组件的具体实现方式,包括模板结构、计算属性、监听方法及样式设置。此外,还介绍了如何在项目中引入并使用该分页组件。
177 0
Vue2分页(Pagination)
|
2月前
|
前端开发 UED 开发者
React 分页组件 Pagination
本文介绍了如何在 React 中实现分页组件,从基础概念到常见问题及解决方案。分页组件用于将大量数据分成多个页面,提升用户体验。文章详细讲解了分页组件的基本结构、快速入门步骤、以及如何处理页面跳转不平滑、页码过多导致布局混乱、边界条件处理和数据加载延迟等问题。通过本文,读者可以全面了解并掌握 React 分页组件的开发技巧。
40 2
VUE3(二十三)自定义分页组件Pagination
刚开始使用vue3写博客的时候,其相关配套的UI库并没有正式发布,但是我还要用,所以这里我自定义了一个分页组件。
682 0
VUE3(二十三)自定义分页组件Pagination
|
4月前
elementUI使用Pagination分页组件增加自定义slot
本文介绍了如何在Element UI的Pagination分页组件中使用自定义slot。通过在`el-pagination`标签内的适当位置添加slot内容,可以在分页组件中插入自定义的HTML或组件。文章提供了一个示例代码,展示了如何添加两个自定义slot,并展示了最终效果。
468 4
elementUI使用Pagination分页组件增加自定义slot
|
JavaScript 前端开发 数据格式
Jquery前端分页插件pagination使用
Jquery前端分页插件pagination使用
160 1
|
前端开发
Concis组件库封装——Pagination分页器
Concis组件库封装——Pagination分页器组件封装
116 1
Concis组件库封装——Pagination分页器
|
JavaScript
如何使用Pagination 分页组件
如何使用Pagination 分页组件
168 0
|
JavaScript
Pagination 分页如何使用
Pagination 分页如何使用
167 0
|
前端开发 Java 数据库
pagination分页插件的getResult明明有数据,但是getTotal方法为0
pagination分页插件的getResult明明有数据,但是getTotal方法为0
322 0

热门文章

最新文章

下一篇
开通oss服务