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,//３個でページング
});
});
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/