ページネーションの導入が簡単に出来る「paginathing.js」

ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。

github.com

BootstrapCSS

今回のプラグインはcssファイルを使用せずに「BootstrapCSS」というフレームワークを使用しています。ただしフレームワークは必要無いcssまで記述されているので注意が必要です。

bootstrap CDN
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

getbootstrap.com

html

<ul class="list-group">
<li class="list-group-item">
<div class="box">
コンテンツ1
</div>
</li>
<li class="list-group-item">
<div class="box">
コンテンツ2
</div>
</li>
<li class="list-group-item">
<div class="box">
コンテンツ3
</div>
</li>
<li class="list-group-item">
<div class="box">
コンテンツ4
</div>
</li>
</ul>

jquery

$(function(){
$('.list-group').paginathing({
perPage: 4,
containerClass: 'panel-footer'
})
});