分页制作

很多时候，不能全部显示数据，只能通过分页来做。之前有个项目，它运用的 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 这个函数，并把页数传进去就解决了。