jQuery am-pagination

<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>

<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="/am-pagination.js"></script>

install by bower :

bower install am-pagination

this plugin based on amazeui

demo page : https://lucky51.github.io/

use bootstrap or amazeui theme

change default class by className option;

 <section id="ampager"></section>
 <br>
 <br>
 <button class="am-btn am-btn-success rderch" >render change page 2</button>
 <span>Or</span>
 <button class="am-btn am-btn-primary newch">new change page 5</button>
 <br>

             

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 : ''
         hideIfEmpty:true  //the container is hidden when its data is empty 
};

//bind change event

var pger =jQuery('#ampager')
                .pagination(pagerOpts)
                .onChangePage(function(e){
                         console.info(e.tiggerSource);  //  'code'  or 'manual' 
                         console.info('pager bind envent :selected page:'+e.page+'  current pageSize:'+e.pageSize+'  number of items'+e.totals);
                });


                //Or 
                
                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);

                });

 //change


  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
        });
 });

You can use am-pagination by amPagination of window :

    (function(amPager){
       var taget =document.querySelector('#ampager');  //or jQuery('#ampager')  or '#ampager'
       amPager(taget,{
          page:10
       });
    })(amPagination);