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 }); });
该jquery分页插件的github地址为:https://github.com/lucky51/am-pagination
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!