前端分页插件pagination.js使用

记录一下前段分页插件的pagination.js使用过程，不至于每次用到分页时都自己再造轮子.

一.引入jquery和pagination.js(下载)

<script src="../static/asserts/js/jquery.min.js"></script>
<script src="../static/asserts/js/jquery.pagination.js"></script>

二．生成分页组件

1.html

<div class="paging-area">
    <input type="hidden" id="totalPage" value="6">
    <div class="box-paging" id="box-paging">
    <div>
</div>

2.js

//分页功能
var total = parseInt($("#totalPage").val());
$('.box-paging').pagination({
    pageCount: total,
    jump: true,
    coping: true,
    homePage: '1',
    endPage: ''+total,
    prevContent: '上页',
    nextContent: '下页',
    callback: function (api) {
        console.log(api.getCurrent())
    }
});

3.加上自己需要的样式

/*分页*/
.box-paging{
    height: 30px;
    line-height: 30px;
    margin: 20px auto;
    user-select: none;
    display: flex;
    justify-content: center;

}
.box-paging>.active{
    background-color: #bcd076;
}
.box-paging>a,span{
    display: inline-block;
    font-size: 12px;
    color: #4d4d4d;
    margin-left: 10px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.box-paging>a:not(.active):hover{
 border-color: #ca0c16;
}
.box-paging>input{
    margin-left: 10px;
    width: 50px;
}

效果