pagings Demo

HTML

<script src="https://rawgit.com/composite/jQuery.paging/0.2.0/jquery.paging.min.js"></script>
<script src="https://rawgit.com/composite/pagings/master/pagings.js"></script>
<div id="paging"></div>
<p>
  <button type="button" class="paging-function" value="1">Change page to 8</button>
  <button type="button" class="paging-function" value="2">Change max page to 101</button>
  <button type="button" class="paging-function" value="3">Destroy and create paging with another options</button>
</p>

CSS

#paging{text-align:center;}
a.pagings-item,a.pagings-side{margin:0 .25em;}
a.pagings-item.selected{font-weight:bold;}

JavaScript

var paging = Paging(document.querySelector('#paging'), {
  current:5,max:45,length:10,next:"[>{6}]",
  onclick:function(e,page){
    alert('going to page '+page);
  }
});
for(var i=0,ps=document.querySelectorAll('.paging-function'),len=ps.length;i<len;i++){
  ps[i].addEventListener('click', function(){
    switch(this.value){
      case '1':
        Paging(paging, {current:8});
        break;
      case '2':
        Paging(paging, {max:101});
        break;
      case '3':
        Paging.destroy(paging);
        setTimeout(function(){
          Paging(paging, {current:2,max:50});
        },1000);
        break;
    }
    return false;
  });
}