javascript - jquery分页代码及算法如何优化
阿神
阿神 2017-04-10 18:04:03
[JavaScript讨论组]

自己写了个分页的函数,总感觉算法及函数写的很别扭。希望各路大神过来指点迷津一番,看看怎么整个优雅的函数出来,万分感激。欢迎大家来拍砖交流,相互学习。

page<9:

page>=9 {

1-4页且pageTotal>9:

page>4且pageTotal-page>=4:

page>4且pageTotal-page<4:

}

function pagination(options){
    var defaults = {
        page:1,
        pageNum:10,
        pageTotal:10,
        url:'' 
    };
    var options = $.extend({},defaults,options),
        dom_content = '',
        page = options.page,//当前页
        url = options.url,//连接
        total = options.pageTotal,//总页数
        prevPage,
        nextPage;

    if(page === 1){
        prevPage = '上一页';
    }else{
        prevPage = '上一页';
    }

    if(page === total){
        nextPage = '下一页';
    }else{
        nextPage = '下一页';
    }
    
    if(total<9){
        for(var i= 1;i<=total;i++){
            var className = i==page?"active":" ";
            dom_content += ''+i+'';
        }
    }else{
        if(page<=4){
            for(var i= 1;i<7;i++){
                var className = i==page?"active":" ";
                dom_content += ''+i+'';
            };
            dom_content +=' ...'+ ' '+total+'';
        }else if(page>4&&Number(total-page)>=4){
            dom_content += '1 ' + '... ';
            for(var i= Number(page-2);i'+i+'';
            };
            dom_content+=' ...'+' '+total+'';
        }else if(page>4&&Number(total-page)<4){
            dom_content += '1 ' + '... ';
            for(var i= Number(total-5);i<=total;i++){
                var className = i==page?"active":" ";
                dom_content += ''+i+'';
            };
        }
    }
    
    var dom = 
        $('

'+ prevPage+ dom_content+ nextPage+ '

'); return dom; }
阿神
阿神

闭关修行中......

全部回复(1)
PHP中文网

既然是用 jQuery,何必再自己拼 HTML 呢,jQuery 的 DOM 处理能力很强的。另外,除 prev 和 next 之外,其它的相对有规律,可以先生成数据数组,再来生成 DOM,也就是 M -> V 的思想。

代码我没测试,所以可能会有些小问题。

function pagination(options) {
    var defaults = {
        page: 1,
        pageNum: 10,
        pageTotal: 10,
        url: ""
    };

    var options = $.extend({}, defaults, options),
        dom_content = "",
        page = options.page,//当前页
        url = options.url,//连接
        total = options.pageTotal,//总页数
        prevPage,
        nextPage;

    function createPageButton(page, isActive, text) {
        return $("<a>").text(text || page)
            .addClass("page_on")
            .addClass(isActive ? "active" : "")
            .attr("href", url + "/" + page);
    }

    var $prev = page === 1
        ? createPageButton(null, false, "上一页")
            .addClass("prev_disable")
            .removeAttr("href")
        : createPageButton(page - 1, false, "上一页");

    var $next = page === total
        ? createPageButton(null, false, "下一页")
            .addClass("next_disable")
            .removeAttr("href")
        : createPageButton(page + 1, false, "下一页");

    var pages = [];
    if (total < 9) {
        pages = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    } else if (page <= 4) {
        pages = [1, 2, 3, 4, 5, 6, 0, total];
    } else if (pageTotal - page >= 4) {
        pages = [1, 0, page - 2, page - 1, page, page + 1, page + 2, 0, total];
    } else {
        pages = [1, 0, total - 5, total - 4, total - 3, total - 2, total - 1, total];
    }

    $pageButtons = pages.map(function(n) {
        return n
            ? createPageButton(n, n === page)
            : " ... ";
    });

    return $("<p>").addClass("pagination_wrapper")
        .append($prev)
        .append($pageButtons)
        .append($next);
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号