JavaScript实现分页功能的源码和效果图

发布时间: 2013/6/9 14:34:24

1.效果图:



2.源码:

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.keyCode == 13 || e.which == 13) {
                    window.location.href = linkStr + 'p=' + pageVal;
                }
            }
            $('#action-pageval').bind('keypress', setActionLink);
        }
    }
}
 
// 方法调用
paging( 5, 120 );


赞助商