分頁製做

不少時候，不能所有顯示數據，只能經過分頁來作。以前有個項目，它運用的 dicuz 框架有自帶的分頁功能，可是惟一很差的地方是用戶體驗很差，須要刷新網頁，因此就本身嘗試作了一個。

效果如圖：

css 代碼：

#page {
    text-align: center;
}
.page {
    display: inline-block;
}
.page a {
    padding: 3px 8px;
    border: 1px solid #d2d2d2;
    text-decoration: none;
    margin: 0 2px;
    color: #444;
}
.page a.invisible {
    visibility: hidden;
}
.page a.on {
    color: #fff;
    border-color: #d36969;
    background: #d36969;
}

#page 和 .page 的樣式設置是爲了讓分頁居中。

 

js 代碼：

var page_num   = 5;
var page_index = 1;
setPages(page_num)
function setPages(num) {
　　 $('#page').remove();
    if (num > 1) {
        $('body').append('<div id="page"><div class="page"></div></div>');
        var page_text = '<a class="prev btn" href="javascript:void(0)">上一頁</a>' +
　　　　　　　　　　　　　　'<a class="on" href="javascript:void(0)">1</a>';
        for (var i = 2; i <= num; i ++) {
            page_text += '<a href="javascript:void(0)">'+i+'</a>';
        }
        page_text += '<a class="next btn" href="javascript:void(0)">下一頁</a>';
        $('#page .page').html(page_text);
        canShow();        
    }     
}

page_num 表示頁數，這個頁數應該是在加載頁面的時候從後臺獲取，只有當頁數有兩頁或者兩頁以上，纔會有分頁；

page_index 表示當前頁(這個值會在用 ajax 與後臺交互時，將它放入 data 裏來傳給後臺)；

$('#page').remove() 這個在後面會解釋，建立了 '上一頁'、'下一頁'和 5 個頁碼，並插入到 body，這裏有一個 canShow 函數。

function canShow() {
    for (var i = 1; i < $('#page .page a').length - 1; i ++) {
        if ($('#page .page a').eq(i).hasClass('on')) {
            $('#page .page a').removeClass('invisible');
            if (i == 1) {
                $('#page .page .prev').addClass('invisible');
            } else if (i == page_num) {
                $('#page .page .next').addClass('invisible');
            } 
        }
    }
}

這個函數是用來判斷 '上一頁' 和 '下一頁' 能不能顯示。而後就是點擊頁碼或者上下頁：

$('#page .page a').on('click', function() {
    if ($(this).hasClass('on')) return;
    $('#page .page a').removeClass('on')
    if ($(this).hasClass('prev')) {
        page_index --;
        $('#page .page a').eq(page_index).addClass('on');
    }else if ($(this).hasClass('next')) {
        page_index ++;
        $('#page .page a').eq(page_index).addClass('on');
    }else {
        page_index = $(this).index();
        $(this).addClass('on');
    }
    getData();
    canShow();
});

這一段純屬一個邏輯判斷，就不在介紹了，這裏也出現一個新函數 getData，就是用來和後臺交互的。

var url  = '...';
var data = { page_index: page_index, ...};
function getData(){
    $.ajax({
        url: url,
        type: 'post',
        data: data,
        success: function(msg){
            msg = JSON.parse(msg);
            showText(msg);
        }
    })
}

把當前頁碼 page_index 和一些須要的信息放入data 裏傳給後臺，而後獲取的數據基本是一個 JSON 數據，要先 parse 一下，這裏有一個 showText 函數，就是用來填寫內容的。

function showText(data){
    var content = '';
    for (obj in data) {
        content += <!-- 佈局 -->
    }
    $('#test').empty().html(content);
}

從後臺獲取的數據經過傳參的方式傳到這個函數，經過循環把數據取出來，先把須要顯示這頁內容的 test 裏面上個頁面的內容清空，再一一對應到佈局裏。

PS：項目中另外一個需求——篩選功能

其實一開始就考慮到這個，因此才把建立分頁，用一個函數 setPages 來封裝，並在裏面寫了 $('#page').remove()，而後篩選時，在那個和後臺交互的 getData 函數中，後臺會多傳一個數據表示篩選結果總共有幾頁，就只要再調用 setPages 這個函數，並把頁數傳進去就解決了。