分页器 Pagination

当数据量过多时，使用分页分解数据。

动态组件渲染

显示代码

<div class="open-container">
	<div id="pagination1"></div>
</div>

<script>

	// 自动渲染静态模版
	openui.pagination.render({
		id: '#open-pagination',
		total: 1000,
		pageSize: 10,
		language: {
			first: '首页',
			prev: '上一页',
			next: '下一页',
			last: '尾页'
		},
		show: {
			first: true,
			last: true,
			total: true,
			prev: true,
			next: true
		},
		click: function(res){
			console.log(res)
		}
	})
	
</script>

API

API	描述
pagination.render(options)	动态渲染
pagination.on(id,()=>{})	事件监听
pagination.val(id)	取值

动态渲染

pagination.render(options)

• 参数options:基础属性配置

属性名	描述	类型	必填	默认值
id	dom选择器	string	是	0
total	数据总条数	number	是	0
pageSize	每页多少条	number	是	0
language	自定义按钮名字：比如自定义英文名 * first: 首页按钮名字 * last: 尾页按钮名字 * prev: 上一页按钮名字 * prev: 下一页按钮名字	string	否	首页 尾页 上一页 下一页
show	自定义显示按钮： * first: 显示首页按钮 * last: 显示尾页按钮 * prev: 显示上一页按钮 * prev: 显示下一页按钮 * total: 显示总条数	boolean true:显示 false:显示	否	true

• 回调函数

options.click 点击按钮后的回调函数

// 返回当前点击的页码
click: function(page){
	console.log(page)
}

事件监听

pagination.on(id,(res)=>{})

// 选择页码时，会触发组件监听方法
// 返回当前选择的页码
// 静态组件，动态组件都会触发
pagination.on(id,(page)=>{
	console.log(page)
})

取值

pagination.val(id)

// 获取当前组件的页面
let page = pagination.val(id);
console.log(page)