jQuery ページナビ・ページネーションができるプラグイン「Pajinate」

jQuery ページナビ・ページネーションができるプラグイン「Pajinate」

 

まずjsを読み込みます。

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

js

$(document).ready(function(){
  $('#paging_container').pajinate({
    items_per_page : 3,//3個でページング
  });
});

 

html

<div id="paging_container" class="container">
  <h2>Vanilla</h2>
  <div class="page_navigation"></div>
  
  <ul class="content">
     <li><p>One</p></li> 
     <li><p>Two</p></li> 
     <li><p>Three</p></li> 
     <li><p>Four</p></li> 
     <li><p>Five</p></li> 
     <li><p>Six</p></li> 
     <li><p>Seven</p></li> 
     <li><p>Eight</p></li> 
     <li><p>Nine</p></li> 
     <li><p>Ten</p></li> 
     <li><p>Eleven</p></li> 
     <li><p>Twelve</p></li> 
     <li><p>Thirteen</p></li> 
     <li><p>Fourteen</p></li> 
     <li><p>Fifteen</p></li> 
     <li><p>Sixteen</p></li> 
  </ul> 
</div>

 

これだけでページングができます。

 

 

参考サイト:
https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-pajinate.html

公式サイト
https://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/

ダウンロード
https://github.com/wesnolte/Pajinate

category cloud