分页 前端分页

前端分页

 
            <div id="page" class="page-count"></div>

样式

/* 列表分页 */
.page-count{
    padding: 20px 0;
    text-align: center;
}
.page-count li{
    float: left;
}
.page-count span a,
.page-count .not-allowed{
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    margin: 0 6px 0;
    padding: 0.5em 1em;
    text-decoration: none;
    text-align: center;
    color: #333;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    cursor: pointer;
}
.page-count span a:hover, 
.page-count span a.current{
    color: #fff !important;
    background: #395F8C;
    border: 1px solid transparent;
}
.page-count .not-allowed{
    cursor: not-allowed;
}
.page-count .ellipsis{
    padding: 0 1em;
}
.list-coll-wrap{

}
.list-con .hint{
    padding-bottom: 10px;
    border-bottom: 2px solid #D2D2D2;
}
.list-con .hint > span{
    font-size: 16px;
    color: #AE9500;
}
.list-con .hint > p{
    float: right;
    font-size: 14px;
    color: #395F8C;
}
.link-details{
    display: inline-block;
    max-width: 170px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

js

   /**
     *   列表分页
     *   @param {Number} curPage    当前页码
     *   @param {Number} total      总条数
     *   @param {Number} totalPage  总页数
     *   @method getListData()      生成list
     *   @method getPageBar()       生成分页条
     */
    var curPage = 1;
    var total;
    var totalPage;
    var pagesize=10;
    var questionmName;
    $("#page").on('click', 'span a', function () {
        var rel = Number($(this).attr("rel"));
        if (rel) {
            getListData(rel);
        }
    })
    function getListData(current) {
        var dataList = {};
        dataList.pageNum = current;
        dataList.pagesize= pagesize;
        dataList.questionmName=questionmName
        $.ajax({
            type: 'get',
            url:‘',
            headers: {C_UID:window.sessionStorage.getItem("uId"),C_UNAME:window.sessionStorage.getItem("uName")},
            data: dataList,
            dataType: 'json',
            beforeSend:function() {
                var index = layer.load(1, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                })
            },
            success:function(res) {
                if(res.code == 200) {
                    layer.closeAll();
                    if(res.data.records.length>0){
                        var data = res.data;
                        var records = data.records;
                        curPage = current;
                        total = data.total;
                        pagesize=data.size;
                        totalPage = Math.ceil(total / data.size);
                        $('#link-list').find('.content-list').html('');
                        records.forEach(function (item,i) {
                            $('#link-list').find('.content-list').append(
                                '<li class="contentli"><span class="content-span"><img src="../../assets/images/help_icon_question.png" alt=""> 问题 : </span><a href="/genealogyHtml/helpDetail?entityID='+item.id+'">'+item.question+'</a></li>'
                            )
                        })
                    }else{
                        $('#link-list').find('.content-list').html('暂无搜索数据');
                    }



                }
            },
            //生成分页条
            complete:function() {
                getPageBar();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                return false;
            }
        })
    }
    getListData(1);
    // 搜索
    $(".search-img").on('click',function(){
        questionmName=$('#search').val();
        getListData();
    })
    // 获取分页条
    function getPageBar() {
        $("#page").find('*').remove();
        // 页码大于最大页数
        if (curPage > totalPage) {
            curPage = totalPage;
        }
        // 页码小于1
        if (curPage < 1) {
            curPage = 1;
        }
        pageStr = '';
        // 为第一页时
        if (curPage == 1) {
            pageStr += '<span class="not-allowed">首页</span><span class="not-allowed">上一页</span>';
        } else {
            pageStr += '<span><a href="javascript:void(0)" rel="1">首页</a></span><span><a href="javascript:void(0)" rel='+(curPage - 1)+'>上一页</a></span>';
        }
        if (totalPage > 6) {
            // 当前页小于第4页时
            if (curPage < 5) {
                for (var i = 1; i < 6; i++) {
                    if (curPage == i) {
                        pageStr += '<span><a class="current" href="javascript:void(0)" rel='+i+'>'+i+'</a></span>';
                    } else {
                        pageStr += '<span><a href="javascript:void(0)" rel='+i+'>'+i+'</a></span>';
                    }
                }
                pageStr += '<span class="ellipsis">...</span>';
                pageStr += '<span><a href="javascript:void(0)" rel='+totalPage+'>'+totalPage+'</a></span>';
            } else {
                // 当前页大于第4页时，添加...来分隔
                if (curPage < totalPage - 3) {
                    pageStr += '<span><a href="javascript:void(0)" rel="1">1</a></span>';
                    pageStr += '<span class="ellipsis">...</span>';
                    for (var i = curPage - 1; i < Number(curPage) + 2; i++) {
                        if (curPage == i) {
                            pageStr += '<span><a class="current" href="javascript:void(0)" rel='+i+'>'+i+'</a></span>';
                        } else {
                            pageStr += '<span><a href="javascript:void(0)" rel='+i+'>'+i+'</a></span>';
                        }
                    }
                    pageStr += '<span class="ellipsis">...</span>';
                    pageStr += '<span><a href="javascript:void(0)" rel='+totalPage+'>'+totalPage+'</a></span>';
                } else {
                    // 当前页小于倒数第4页时，添加...来分隔
                    pageStr += '<span><a href="javascript:void(0)" rel="1">1</a></span>';
                    pageStr += '<span class="ellipsis">...</span>';
                    for (var i = totalPage - 4; i < Number(totalPage) + 1; i++) {
                        if (curPage == i) {
                            pageStr += '<span><a class="current" href="javascript:void(0)" rel='+i+'>'+i+'</a></span>';
                        } else {
                            pageStr += '<span><a href="javascript:void(0)" rel='+i+'>'+i+'</a></span>';
                        }
                    }
                }
            }
        } else {
            for (var i = 1; i < totalPage + 1; i++) {
                if (curPage == i) {
                    pageStr += '<span><a class="current" href="javascript:void(0)" rel='+i+'>'+i+'</a></span>';
                } else {
                    pageStr += '<span><a href="javascript:void(0)" rel='+i+'>'+i+'</a></span>';
                }
            }
        }
        //最后页时
        if (curPage >= totalPage) {
            pageStr += '<span class="not-allowed">下一页</span><span class="not-allowed">尾页</span>';
        } else {
            pageStr += '<span><a href="javascript:void(0)" rel='+(Number(curPage) + 1)+'>下一页</a></span><span><a href="javascript:void(0)" rel='+totalPage+'>尾页</a></span>';
        }
        $("#page").append(pageStr);
    }