[ プログラミング ] jQueryで静的HTMLファイルをページネーション(ページ分割)する方法

ページネーションのjQueryプラグインを配布しております。

ブログなどでは一般になったページネーション(ページ分割)ですが、静的なHTMLファイルでもページネーションしたいというご要望をいくつかいただいたので作ってみました。

既存のjQueryプラグインには以下の様なものがあります。

ですが、なかなかデザイン的に希望のものがなくて…。ということで作ってみました。

デモは以下からどうぞ。2パターン作ってみました。省略記号(…)があるものとないものです。

省略記号がないバージョン

DOMO

省略記号があるバージョン

DOMO

少しコードが長いので、HTML5とCSS3とjQueryコードを分けています。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[DEMO]jQueryで静的HTMLファイルをページネーション(ページ分割)する方法</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script>
$(function() {
    $('.list li').pagination({
        pager        : $('.pager'),
        prevText     : '<',
        nextText     : '>',
        firstText    : '≪',
        lastText     : '≫',
        viewNum      : 8,
        pagerNum     : 3,
        ellipsis     : false,
        linkInvalid  : true,
        goTop        : true,
        firstLastNav : true,
        prevNextNav  : false
    });
});
</script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
(略)
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
<div class="pager"></div>
</body>
</html>

Java Script

$.fn.pagination = function(config) {
    // オプション
    var o = $.extend({
        pager        : $('.pager'),
        prevText     : 'prev',
        nextText     : 'next',
        firstText    : 'first',
        lastText     : 'last',
        ellipsisText : '…',
        viewNum      : 6,
        pagerNum     : 3,
        ellipsis     : true,
        linkInvalid  : false,
        goTop        : true,
        firstLastNav : true,
        prevNextNav  : true
    }, config);

    // セレクタ
    var $element = $(this);
    var $pager = o.pager;
    if(o.ellipsis){
        var $ellipsisFirst= $('<span class="ellipsis"/>').text(o.ellipsisText);
        var $ellipsisLast= $('<span class="ellipsis"/>').text(o.ellipsisText);
    }

    // 値取得
    var tatalItemNum =$element.length;
    var tatalpageNum = Math.ceil(tatalItemNum /o.viewNum);
    var ellipsisFlag = false;

    // 変数設定
    var currentIndex = 0;

    // 省略記号フラグ判定
    if(tatalpageNum > o.pagerNum) { ellipsisFlag = true;}

    // ページャーの生成
    for (var i=0; i < tatalpageNum; i++) {
        $('<span/>').text(i + 1).appendTo($pager);
    };
    if(o.firstLastNav){
        $('<span class="prev"/>').text(o.prevText).prependTo($pager);
        $('<span class="next"/>').text(o.nextText).appendTo($pager);
    }
    if(o.prevNextNav){
        $('<span class="first"/>').text(o.firstText).prependTo($pager);
        $('<span class="last"/>').text(o.lastText).appendTo($pager);
    }
    var $pagerInner = $pager.find('span').not('.prev, .next, .first, .last');

    // コンテンツの初期表示
    $element.hide();
    for (var i=0; i < o.viewNum; i++) {
        $($element[i]).show();
    };

    // ページャーの初期表示
    $pagerInner.hide();
    for (var i=0; i < o.pagerNum; i++) {
        $($pagerInner[i]).show();
    };
    $($pagerInner[0]).addClass('current');
    if (o.linkInvalid) {
        $('.prev').addClass('invalid');
        $('.first').addClass('invalid');
    }
    if(o.ellipsis) {
        if(ellipsisFlag){
            if(tatalpageNum  - o.pagerNum > 1) {
                $($pagerInner[tatalpageNum-1]).before(function() {
                  return $ellipsisLast;
                });
            }
            $($pagerInner[tatalpageNum-1]).show();
        }
    }

    // 最初のボタンをクリック
    $('.first').on('click', function(){
        var current = 0;
        if(currentIndex == 0){
            if (o.linkInvalid) {
                return false;
            }
        }
        change(current);
    });

    // 最後のボタンをクリック
    $('.last').on('click', function(){
        var current = tatalpageNum - 1;
        if(currentIndex == $pagerInner.length-1){
            if (o.linkInvalid) {
                return false;
            }
        }
        change(current);
    });

    // 前のボタンをクリック
    $('.prev').on('click', function(){
        var current = currentIndex - 1;
        if(currentIndex == 0){
            if (o.linkInvalid) {
                return false;
            } else {
                current = currentIndex;
            }
        }
        change(current);
    });

    // 次のボタンをクリック
    $('.next').on('click', function(){
        var current = currentIndex + 1;
        if(currentIndex == $pagerInner.length-1){
            if (o.linkInvalid) {
                return false;
            } else {
                current = currentIndex;
            }
        }
        change(current);
    });

    // 番号をクリック
    $pagerInner.each(function (current) {
        $(this).on('click', function(){
            if($(this).hasClass('current')){
                if (o.linkInvalid) {
                    return false;
                }
            }
            change(current);
        });
    });

    // 切り替え実行
    var change = function (current) {
        // コンテンツの表示
        $element.hide();
        for(var i = (current * o.viewNum) ; i < ((current + 1) * o.viewNum) ; i++){
            $($element[i]).show();
        }
        // ページャーの表示
        $pagerInner.hide();
        if(o.ellipsis) {
            if(ellipsisFlag){
                $ellipsisFirst.remove();
                $ellipsisLast.remove();
            }
        }
        var num = current -1;
        if(num > (tatalpageNum - o.pagerNum)){
            num = tatalpageNum - o.pagerNum;
        }
        for(var i = num ; i < (num + o.pagerNum) ; i++){
                $($pagerInner[i]).show();
        };
        // 省略記号の表示
        if(o.ellipsis) {
            if(ellipsisFlag){
                // 前の省略記号
                $($pagerInner[0]).show();
                if(num > 1){
                        $($pagerInner[0]).after(function() {
                          return $ellipsisFirst;
                        });
                }
                // 後ろの省略記号
                if(num < (tatalpageNum - o.pagerNum -1)) {
                    $($pagerInner[tatalpageNum -1]).before(function() {
                      return $ellipsisLast;
                    });
                }
                $($pagerInner[tatalpageNum -1]).show();
            }
        }
        // 現在位置設定
        currentIndex = current;
        // デザイン
        $pagerInner.removeClass('current');
        $($pagerInner[current]).addClass('current');
        if (o.linkInvalid) {
            if(current == 0 ) {
                $('.prev').addClass('invalid');
                $('.first').addClass('invalid');
            } else {
                $('.prev').removeClass('invalid');
                $('.first').removeClass('invalid');
            }
            if(current == tatalpageNum - 1 ) {
                $('.next').addClass('invalid');
                $('.last').addClass('invalid');
            } else {
                $('.next').removeClass('invalid');
                $('.last').removeClass('invalid');
            }
        }
        if(o.goTop){
            $('html,body').scrollTop(0);
        }
    }
}

CSS

body {
    font-size:14px;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",sans-serif;
}

.list {
    overflow:hidden;
    width:880px;
    margin: 30px auto;
    padding:0;
}

.list li {
    display:block;
    float:left;
    width:200px;
    height:150px;
    margin:10px;
    color:#fff;
    font-size:48px;
    line-height:150px;
    text-align:center;
    vertical-align:middle;
    list-style:none;
    background:#ccc;
}

.pager {
    clear:both;
    margin:30px 0;
    text-align:center;
}

.pager span {
    margin:5px;
    padding:5px 8px;
    color:#fff;
    background:#000;
}
.pager span:hover {
    cursor:pointer;
    background:#999;
}

.pager span.current {
    color:#000;
    background:none;
}
.pager span.current:hover {
    cursor:default;
}

.pager span.invalid {
    color:#dcdcdc;
    background:none;
}
.pager span.invalid:hover {
    cursor:default;
}

.pager span.ellipsis {
    color:#000;
    background:none;
}
.pager span.ellipsis:hover {
    cursor:default;
}

オプションがたくさんあるのですが、簡単に説明します。

  • pager:ページャー部分の指定です。ページャーは複数付けれます。
  • prevText:「ひとつ前のページに戻る」テキストです。
  • nextText:「ひとつ後のページに進む」テキストです。
  • firstText:「最初のページに戻る」テキストです。
  • lastText:「最後のページに戻る」テキストです。
  • ellipsisText:「省略」テキストです。
  • viewNum:1ページに表示するコンテンツの数です。
  • pagerNum:ページャーのページ送りの数です。
  • ellipsis:省略記号を使用するかどうかを選択できます。
  • linkInvalid:現在の位置にいるときなどリンクを無効にするかを選択できます。
  • goTop:ページを遷移した時にページのトップに戻るかを選択できます。
  • firstLastNav:「最初/最後のページに戻る」テキストを表示するか選択できます。
  • prevNextNav:「前/後のページに戻る」テキストを表示するか選択できます。

このプラグインの良いところは、HTMLファイルを柔軟にできるところです。つまり、繰り返しするところのHTMLを自由にできます。今回はliタグを使っていますが、div要素の入れ子でも問題ありません。