分页插件pagination.js的使用

 今日分享一款分页插件，让页面变的更加简单。

Pagination.js  

官网：http://pagination.js.org/

该js文档非常清晰，非常简单明了，所以很容易手上

 

1、引入jQuery和jQuery.pagination.js文件

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

2.css样式

<link href="../css/public/pagination/pagination.css" rel="stylesheet"/>

3.html代码

<div class="mui-content">
	<div class="profit_titleBox">
		<span class="span1">年份</span>
		<span class="span2">日期</span>
		<span class="span3">分润金额</span>
	</div>
	<!-- 分页内容部分 -->
	<div class="row page-list">
	</div>
	<!-- 分页显示页数部分 -->
	<div class="row ">
		<div class="page-container">
		</div>
	</div>
</div>

4.js代码

<script type="text/javascript">
const pageSize = 10 // 默认页码大小
const dataCount = 100 // 测试数据数量
const pager = new Pagination('.page-container', {
  pageSize: pageSize,
  autoLoad: true,
  unit: '条',
  toPage: function(index, _pageSize) {
    // 设置记录总数，用于生成分页HTML内容
    if (index === 0 || _pageSize) this.updateCount(dataCount, _pageSize)

    // 根据页码以及分页大小生成html内容
    let pageListHtml = ''
    for (var i = 0; i < (_pageSize || pageSize); i++) {
      pageListHtml += 	`<div class="profit_ContBox">
						<span class="span1">
						2018 - ${index * (_pageSize || pageSize) + i + 1}
						</span>
						<span class="span2">
						10月30日
						</span>
						<span class="span3">
						+12345
						</span>
						</div>`
    }
    $('.page-list').html(pageListHtml)
  },

})
</script>

5.最终效果图

参数配置

参数名	描述	参数值
maxentries	总条目数	必选参数，整数
items_per_page	每页显示的条目数	可选参数，默认是10
num_display_entries	连续分页主体部分显示的分页条目数	可选参数，默认是10
current_page	当前选中的页面	可选参数，默认是0，表示第1页
num_edge_entries	两侧显示的首尾分页的条目数	可选参数，默认是0
link_to	分页的链接	字符串，可选参数，默认是"#"
prev_text	“前一页”分页按钮上显示的文字	字符串参数，可选，默认是"Prev"
next_text	“下一页”分页按钮上显示的文字	字符串参数，可选，默认是"Next"
ellipse_text	省略的页数用什么文字表示	可选字符串参数，默认是"..."
prev_show_always	是否显示“前一页”分页按钮	布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always	是否显示“下一页”分页按钮	布尔型，可选参数，默认为true，即显示“下一页”按钮
callback	回调函数	默认无执行效果