jquery分页插件am-pagination.js

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

        });

 });