am-pagination.js是一款jquery分页插件。该jquery分页插件可以动态的在客户端页面渲染出分页条效果，并带有多个配置参数，以及Bootstrap和amazeui两种主题风格的分页条。
使用方法
在页面中引入am-pagination.css和jquery、am-pagination.js文件，Bootstrap和amazeui文件为可选的。
<link rel="stylesheet" href="../amazeui/dist/css/amazeui.flat.css"> //Or theme:'amazeui'
<link rel="stylesheet" href="./dist/css/am-pagination.css"> //Or //
<link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.css"> //Or theme:'bootstrap'
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="/am-pagination.js"></script>
|
HTML结构
使用一个块级元素作为分页条的容器：
<div id="ampagination-demo"></div>
|
初始化插件
在页面DOM元素加载完毕之后，通过pagination()方法来初始化该jquery分页插件。
var pager = jQuery('#ampagination-demo').pagination({
// 配置参数
});
|
配置参数
该jquery分页插件的可用配置参数如下：
var pagerOpts={
maxSize: 7, // Limit number for pagination size. default:7
totals: 100, //Total number of items in all pages.
page: 1, //select page index 1....total page
pageSize: 10, //Maximum number of items per page. A value less than one indicates all items on one page. default :10
lastText: '»»', //Text for Last button. default: '»»'
firstText: '««', //Text for First button. default: '««'
prevText: '«',//« //Text for Previous button. default:'«'
nextText: '»', //Text for next button. default:'»'
rotate: true,//Whether to keep current page in the middle of the visible ones default:true
directionLinks: true,// Whether to display Previous / Next buttons. default:true
boundaryLinks: true,// Whether to display first / last buttons. default:true
theme:'', // 'bootstrap' or 'amazeui' defalut:'' default ui only modify background color from bootstrap pagination
btnSize:'' // 'sm' or 'lg' defalut : ''
};
|
事件
可以为分页条绑定事件。
var pger =jQuery('#ampager')
.pagination(pagerOpts)
.onChangePage(function(e){
console.info('pager bind envent :selected page:'+e.page+' current pageSize:'+e.pageSize+' number of items'+e.totals);
});
// 或者
jQuery('#ampager').on('am.pagination.change',function(e){
console.info('jquery bind event :selected page:'+e.page+' current pageSize:'+e.pageSize+' number of items'+e.totals);
});
|
也可以动态的改变分页效果。
jQuery('.rderch').on('click',function(){
var rdrOpts={
totals:100,/*optional*/ //default:current totals
pageSize:10,/*optional*/ //default:current pageSize
page:2/*optional*/ //default:current selected page
}
pger.render(rdrOpts);
});
jQuery('.newch').on('click',function(){
jQuery('#ampager').pagination({
page:5
});
});
|