diy前端分页

diy前端分页

本来想直接用别人的代码，做个分页的，但是想着如果客户不喜欢需要改，那万一其他人的达不到要求，那就不好改了。还不如自己写个，想怎么改就怎么改。
这个分页的特点是当前页面尽量做到中间位置显示，比如当前页是4，那么左边从2开始，直到6，分页最多显示5页，多了不显示，其他细节不做了，够用就行了

1）先看效果图

2）html代码

这里省略了显示动态的div

<div class="page">
    <ul class="page-ul">

    </ul>
</div>

3）css样式

.page {
    float: right;
}
.page ul{
    list-style: none;
}
.page ul li{
    display: inline-block;
}

.page-index {
    background-color: #dddddd;
    color: #363636;
    border: 1px solid #dddddd;
    padding: 3px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius:2px;
}
.page-index:hover,.page-active {
    background-color: #555555;
    color: white;
}

4）js代码，后台数据用ajax请求获取

<script type="text/javascript" src="/static/layui/layui.all.js"></script>
<script>
var type = "<?php echo $type;?>";
var current_page = 1;
var init_page_size = 9;
var init_page_total = 0;
layui.use('flow', function(){
    var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
    var flow = layui.flow;
    page(type,current_page,init_page_size);

    function page(type,page,page_size){
        $('.news').empty();
        $('.page-ul').empty();
        var json_data = {
            type:type,
            page:page,
            page_size:page_size
        }
        $.ajax({
            url:'/index/news/list',
            type:'post',
            data:json_data,
            success:function(data){
                res = JSON.parse(data);
                var lis = [];
                layui.each(res.data, function(index, item){
                    lis.push('<div class="news-box wow rollIn">' +
                        '<a href="/index/news/detail/id/'+item.id+'.html">' +
                        '<div class="news-img"><img src="'+item.cover+'"></div>' +
                        '<div class="news-title wow bounceIn">'+item.title+'</div>' +
                        '<div class="news-description wow bounceInUp">'+item.brief_introduction+'</div></a></div>');
                });
                $('.news').append(lis.join(''));
                var li = '<li class="pre"><button class="page-index page-pre"><<</button></li>';
                if(res.pages > 5){
                    var left = page - 2;
                    var right = parseInt(page) + 2;
                    var i = 1;
                    if(left > 1 && right > 5){
                        if(right <= res.pages){
                            i = left
                        }else{
                            i = res.pages - 4;
                        }
                    }
                    var num = 0;
                    while(num < 5 && i <= res.pages){
                        if(i == page){
                            li += '<li><button class="page-index page-active page-'+i+'">'+i+'</button></li>';
                        }else{
                            li += '<li><button class="page-index page-'+i+'">'+i+'</button></li>';
                        }
                        num++;
                        i++;
                    }
                }else{
                    for(var i=1;i<=res.pages;i++){
                        if(i == page){
                            li += '<li><button class="page-index page-active page-'+i+'">'+i+'</button></li>';
                        }else{
                            li += '<li><button class="page-index page-'+i+'">'+i+'</button></li>';
                        }
                    }
                }
                li += '<li class="next"><button class="page-index page-next">>></button></li>';
                init_page_total = res.pages;
                current_page = page;
                $('.page > .page-ul').append(li);
            }
        });
    }

    $('.page').on('click','button',function(i,v){
        if($(this).hasClass('page-active')){    //禁止点击当前页
            return;
        }
        var index = $(this).text();
        if(index == '<<'){
            var pre_page = current_page - 1;
            if(current_page > 1){
                $('.page-active').removeClass('page-active');
                $('.page-'+pre_page).addClass('page-active');
                page(type,pre_page,init_page_size);
            }
            return;
        }else if(index == '>>'){
            var next_page = parseInt(current_page) + 1;
            if(current_page < init_page_total){
                $('.page-active').removeClass('page-active');
                $('.page-'+next_page).addClass('page-active');
                page(type,next_page,init_page_size);
            }
            return;
        }else{
            page(type,index,init_page_size);
        }
    })
});
</script>

5）细节没弄，后续有需要再更新，有问题欢迎留言