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：该代码整理自项目实践代码，水平有限，望高手指点。