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/