pagination.md

<script type="text/javascript" src="../assets/xui.js"></script>

3.1.9 pagination

说明: 当加载/渲染所有数据将花费很多时间时,可切换页码浏览数据。

使用及参数说明:

<div id="pagerId"></div>

1.ES5时代
let myPage = new xui.pagination({
	id: string,
	index: number,
	total: number,
	isShowDot: boolean,
	isShowNum: boolean,
	isJumpPage: boolean,
});

2.ES6时代
import pagination from '../packages/pagination';
let myPage = new pagination({
	id: string,
	index: number,
	total: number,
	isShowDot: boolean,
	isShowNum: boolean,
	isJumpPage: boolean,
});
myPage.onClick = function(index){
	console.log(index);
}
myPage.onKeyUp = function(index){
	console.log(index);
}

• 复制好相应的html,取一个独特的id,然后初始化init就可以使用了,非常方便
• id表示分页的id 必传
• index表示初始化显示哪一页的数字
• total表示分页的总页数 必传
• isShowDot表示是否将不可见的页数用...显示
• isShowNum表示是否显示当前页和总页数,格式为index/total
• isJumpPage表示是否显示支持跳转的输入框(纯数字),输入大于分页总数则默认跳至最后一页
• onClick可以获取当前点击分页的数字,可以用ajax获取数据,渲染页面
• onKeyUp可以获取当前输入分页的数字,可以用ajax获取数据,渲染页面
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.先来看看最简单分页,麻雀虽小五脏俱全呀!

<script type="text/javascript"> var myPage = new xui.pagination({ id: 'pagerId', index: 1, total: 11, }); myPage.onClick = function(index){ console.log(index); } </script>

<div id="pagerId"></div>

var myPage = new xui.pagination({
	id: "pagerId",
	index: 1,
	total: 11,
});
myPage.onClick = function(index){
	console.log(index);
}

2.慢慢的你需要更多功能来满足日益增长的需求,所以没办法你把所有的配置都写上去了,期待这生一个完美的解决方案

<script type="text/javascript"> var myPage1 = new xui.pagination({ id: 'pagerId1', index: 3, total: 20, isShowDot: true, isShowNum: true, isJumpPage: true, }); myPage1.onClick = function(index){ console.log(index); } myPage1.onKeyUp = function(index){ console.log(index); } </script>

<div id="pagerId"></div>

var myPage1 = new xui.pagination({
	id: "pagerId1",
	index: 1,
	total: 11,
	isShowDot: true,
	isShowNum: true,
	isJumpPage: true,
});
myPage1.onClick = function(index){
	console.log(index);
}
myPage1.onKeyUp = function(index){
	console.log(index);
}