jquery分页插件am-pagination.js_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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