javascript - jquery分页代码及算法如何优化

问题描述

问 题

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

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 = '<a class="page_on prev_disable">上一页</a>';
    }else{
        prevPage = '<a href='+url+'/'+Number(page-1)+' class="page_on">上一页</a>';
    }

    if(page === total){
        nextPage = '<a class="page_on next_disable">下一页</a>';
    }else{
        nextPage = '<a href='+url+'/'+Number(page+1)+' class="page_on">下一页</a>';
    }
    
    if(total<9){
        for(var i= 1;i<=total;i++){
            var className = i==page?"active":" ";
            dom_content += '<a href='+url+'/'+i+' class="page_on '+className+'">'+i+'</a>';
        }
    }else{
        if(page<=4){
            for(var i= 1;i<7;i++){
                var className = i==page?"active":" ";
                dom_content += '<a href='+url+'/'+i+' class="page_on '+className+'">'+i+'</a>';
            };
            dom_content +=' ...'+ ' <a href='+url+'/'+total+' class="page_on">'+total+'</a>';
        }else if(page>4&&Number(total-page)>=4){
            dom_content += '<a href='+url+'/1' + ' class="page_on">1</a> ' + '... ';
            for(var i= Number(page-2);i<Number(page+3);i++){
                var className = i==page?"active":" ";
                dom_content += '<a href='+url+'/'+i+' class="page_on '+className+'">'+i+'</a>';
            };
            dom_content+=' ...'+' <a href='+url+'/'+total+' class="page_on">'+total+'</a>';
        }else if(page>4&&Number(total-page)<4){
            dom_content += '<a href='+url+'/1' + ' class="page_on">1</a> ' + '... ';
            for(var i= Number(total-5);i<=total;i++){
                var className = i==page?"active":" ";
                dom_content += '<a href='+url+'/'+i+' class="page_on '+className+'">'+i+'</a>';
            };
        }
    }
    
    var dom = 
        $('<div class="pagination_wrapper">'+
           prevPage+
           dom_content+
           nextPage+
        '</div>');

    return dom;
}

解决方案

既然是用 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 $("<div>").addClass("pagination_wrapper")
        .append($prev)
        .append($pageButtons)
        .append($next);
}

这篇关于javascript - jquery分页代码及算法如何优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！