pagination.js

一、效果

二、实现 引入jquery.pagination.js

<div class="z-literature-page">
        <div class="z-data-total">共<span>100</span>条</div>
        <div class="z-pagesize">
            <select name="pagesize" class="pagesize">
                <option value="10">10条/页</option>
                <option value="20">20条/页</option>
                <option value="30">30条/页</option>
                <option value="40">40条/页</option>
                <option value="50">50条/页</option>
                <option value="50">100条/页</option>
            </select>
        </div>
        <div class="literature-page" id="literaturePage"></div>
  </div>

  
  $(".z-literature-page .pagesize").change(function () {
        var pagesize = $(this).val();
        pageInt(pagesize)
    })
    function pageInt(pageSize) {
        $('#literaturePage').pagination({
            totalData: 100, //总条数
            showData: pageSize, //每页条数
            jump: true,
            prevContent: '上一页',
            nextContent: '下一页',
            coping: true,
            callback: function (api) {
                //page=api.getCurrent()
            }
        });
    }
 pageInt(10);
                                   

.z-literature-page{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  border-top: 1px solid #ddd;
}
.z-literature-page .z-data-total{
  font-size: 14px;
  margin-right: 24px;
}
.z-literature-page .z-data-total span{
  padding: 0 4px;
}
.z-literature-page .pagesize{
  border: 1px solid #e2e2e2 !important;
  height: 32px;
  padding: 3px;
  border-radius: 4px;
  cursor: pointer;
}
#literaturePage{
  display: flex;
  align-items: center;
  margin-left: 24px;
}
#literaturePage a,#literaturePage span{
     padding: 0 11px;
     height: 28px;
     line-height: 28px;
     background: #F1F3F6;
    border-radius: 4px;
    color: #484F5D;
    margin-right: 8px;
    
}
#literaturePage span.active{
  background: #4C85FA;
  border-radius: 4px;
  color: #fff;
  
}
#literaturePage input{
  width: 60px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #e2e2e2 !important;
  margin-left: 24px;
  margin-right: 8px;
  text-align: center;
}