JavaScript 实现分页效果

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 setPageLink(e){
                var target = e.target,
                pageVal = $(target).val();
                pageVal = parseInt(pageVal, 10);
                
                if (pageVal >= 1) {
                    $('.action-wrap .page-submit').attr('href', linkStr + 'p=' + pageVal);
                }
            }
            function actionPage(e){
                var actionLink, keyCode, target, pageVal, actionLink;
                target = e.target;
                pageVal = $(target).val();
                pageVal = parseInt(pageVal, 10);

                // 获取键码, 13为回车(Enter)键的键码
                keyCode = (typeof e.charCode == 'number') ? e.charCode : e.keyCode;
                if (keyCode == '13' &&　pageVal >= 1) {
                    actionLink = linkStr + 'p=' + pageVal;
                    window.location.href(actionLink);
                }
            }

            $('#action-pageval').bind('change blur',  setPageLink)
            .bind('keypress', actionPage);
        }
    }
}

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

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

 

 

分类: JavaScript