simplePagination.js

• Feb 25, 2015
• Tags: jquery, tips

ページ分割ができる「simplePagination.js」。

simplePagination.js

jquery本体と下記ファイルを読み込みます。
・「jquery.simplePagination.js」
・「simplePagination.css」

HTML

<div class="selection" id="page-1">
1ページ
</div>
<div class="selection" id="page-2">
2ページ
</div>
<div class="selection" id="page-3">
3ページ
</div>
<div class="selection" id="page-4">
4ページ
</div>
<div class="selection" id="page-5">
5ページ
</div>

ページネーションを表示させたい箇所に下記を記述。

<div class="pagination-holder cf">
<div id="light-pagination" class="pagination"></div>
</div>

スクリプト

<script>
$(function(){
    $(".pagination").pagination({
        items: 5,
        displayedPages: 1,
        cssStyle: 'light-theme',
        onPageClick: function(currentPageNumber){
            showPage(currentPageNumber);
        }
    })
});
function showPage(currentPageNumber){
    var page="#page-" + currentPageNumber;
    $('.selection').hide();
    $(page).show();
} 
</script>

CSS

.selection {
 display:none;
}
#page-1 {
 display:block;
}