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：該代碼整理自項目實踐代碼，水平有限，望高手指點。