JavaScript 实现分页效果

一、需求示例图

 

 

二、需求分析

1、分页依据元素: 当前页码, 后端的页码总数

2、页数小于等于6, 直接在当前页码显示左右相邻页码

3、页数大于等于7, 根据 余数（= 总页码数 - 当前页码数）来做判断 

三、注释源码

注：代码依赖jQuery库

function paging ( currentPage, totalPage ) {
    var p = currentPage, t = totalPage,
        linkStr = ''; // 页码链接(后面 + 页码参数),也可以作为参数传递

    // 插入一个页码包装器
    $('<div class="pagination"></div>').appendTo('body');
    var pageWrap = $('.pagination');

    if (t > 0) {
        // 只有一页,插入当前页码并返回
        if (t == 1) {
            pageWrap.append('<a class="active">' + p + '</a>');
            return;
        }

        // 插入当前页码
        pageWrap.append('<a class="active">' + p + '</a>');

        // 处理上一页,下一页
        var curPage = pageWrap.find('.active');
        prevStr = '<a class="prev" href="' + linkStr + 'p=' + (p-1) + '">' + '&lt;' + '</a>',
        nextStr = '<a class="next" href="' + linkStr + 'p=' + (p+1) + '">' + '&gt;' + '</a>';

        if (p === 1) {
            curPage.before('<a class="prev">&lt;</a>');
            curPage.after(nextStr);
        }
        else if (p === t) {
            curPage.before(prevStr);
            curPage.after('<a class="next">&gt;</a>');
        }
        else {
            curPage.before(prevStr);
            curPage.after(nextStr);
        }

        // 处理当前页相邻页码
        // 页数小于等于6
        if (p <= 6) {
            for (var i = 0; i < t-p; i++) {
                curPage.after('<a href="' + linkStr + 'p=' + (t-i) + '">' + (t-i) + '</a>');
            }
            for (var i = 0; i < p-1; i++) {
                curPage.before('<a href="' + linkStr + 'p=' + (i+1) + '">' + (i+1) + '</a>');
            }
        }
        // 页数大于等于7, 判断当前页左右的页码数来处理
        else {

            // 间隔页码数 = 总页码 - 当前页码
            var intervalNum = t - p;
            
            // 当前页左右各最多显示5个页码
            // 显示右侧页码
            if (intervalNum > 5) {
                // p必须为数值类型，否则(p+1)会执行字符串拼接
                var rtStr = '<a href="' + linkStr + 'p=' + (p+1) + '">' + (p+1) +'</a>'
                + '<a href="' + linkStr + 'p=' + (p+2) + '">' + (p+2) +'</a>' + '<span class="apostrophe">...</span>'
                + '<a href="' + linkStr + 'p=' + (t-1) + '">' + (t-1) +'</a>'
                + '<a href="' + linkStr + 'p=' + t + '">'+ t +'</a>';

                curPage.after(rtStr);
            }
            else {
                for (var i = 0; i < intervalNum; i++) {
                    curPage.after('<a href="' + linkStr + 'p=' + (t - i) + '">' + (t - i) + '</a>');
                }
            }
            // 显示左侧页码
            if (p > 6) {
                var ltStr = '<a href="' + linkStr + 'p=' + 1 + '">' + 1 +'</a>'
                + '<a href="' + linkStr + 'p=' + 2 + '">'+ 2 +'</a>' + '<span class="apostrophe">...</span>'
                + '<a href="' + linkStr + 'p=' + (p-2) + '">' + (p-2) +'</a>'
                + '<a href="' + linkStr + 'p=' + (p-1) + '">'+ (p-1) +'</a>';
                
                curPage.before(ltStr);
            }
            else {
                for (var i=0; i < p-1; i++) {
                    curPage.before('<a href="' + linkStr + 'p=' + (1+i) + '">' + (1+i) + '</a>');
                }
            }
            
            // 处理页码跳转
             var actionStr = '<div class="action-wrap"><label for="action-pageval">跳转到:</label>' +
            '<input id="action-pageval" type="text"></input>'+
            '<a class="page-submit">GO</a>' + '</div>';
            $('.pagination .next').after(actionStr);

            function setActionLink(e){
                var actionLink, target, pageVal;
                target = e.target;
                pageVal = parseInt($(target).val(), 10);
                if (pageVal >= 1) {
                    $('.action-wrap .page-submit').attr('href', linkStr + 'p=' + pageVal);
                }
                if (e.which == 13) {
                    window.location.href = linkStr + 'p=' + pageVal;
                }
            }
            $('#action-pageval').bind('keypress change', setActionLink);
        }
    }
}

// 方法调用
paging( 5, 120 );

 

PS：该代码整理自项目实践代码，水平有限，望高手指点。