BootstrapとJavascriptを使用したページネーションのサンプル

今回はBootstrapとJavastrapを使用したページネーションを実装したサンプルコードについて説明していきたいと思います。

具体的にどういう機能を実装するのかというと、

・IDとContentからなるテーブルがある

・1ページにつき20個表示する

・一番下のページネーションがある

という感じになります。

ただしページネーションのロジックに重点を置いたので、フロントサイドだけの実装になります。

サンプルコード

さっそくですが、まずは全コードを載せます。

index.htmlのみです。


<!DOCTYPE html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    </head>
 
    <body>
        <div style="margin: 10px;">
            <h1>Pagination</h1>
 
            <table id="container" class="table table-sm table-bordered" style="width: 500px;"></table>
 
            <nav><ul class="pagination" id="pagination"></ul></nav>
        </div>
 
        <!-- Pagenation logic -->
        <script>
            // ページ数を取得
            var page = Number(getQueryParam('page'));
            if (page < 1) page = 1;
            count = 1015;
            perPage = 20;
            maxPage = Math.ceil(count / perPage) // 51
 
            // コンテンツ
            var html = '<thead><tr><th>ID</th><th scope="col">Content</th></tr></thead>';
            var i;
            for (i = (page - 1) * perPage + 1; i <= page * perPage && i <= count; i++) {
                html += `<tbody><tr><th scope="row">${i}</th><td>これは${i}番目のコンテンツです。</td></tr>`;
            }
            document.getElementById('container').innerHTML = html;
 
            // ページネーション
            html = '';
            if (page > 1) {
                html += `<li class="page-item"><a class="page-link" href="?page=${page - 1}">前へ</a></li>`;
            }
            for (i = page - 2; i <= page + 2 && i <= maxPage; i++) {
                if (i < 1) continue;
                if (i == page) {
                    html += `<li class="page-item active"><a class="page-link" href="?page=${i}">${i}</a></li>`;
                    continue;
                }
                html += `<li class="page-item"><a class="page-link" href="?page=${i}">${i}</a></li>`;
            }
            if (page != maxPage) {
                html += `<li class="page-item"><a class="page-link" href="?page=${page + 1}">次へ</a></li>`
            }
            document.getElementById('pagination').innerHTML = html;
 
            // URLから指定したパラメータを取得
            function getQueryParam($key) {
                if (1 < document.location.search.length) {
                    var query = document.location.search.substring(1);
                    var parameters = query.split('&');
                    for (var i = 0; i < parameters.length; i++) {
                        // パラメータ名とパラメータ値に分割する
                        var element = parameters[i].split('=');
                        if (element[0] == $key) return element[1];
                    }
                }
                return null;
            }
        </script>
 
        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Pagination</h1>

</div>

// ページ数を取得

var page = Number(getQueryParam('page'));

if (page < 1) page = 1;

count = 1015;

perPage = 20;

maxPage = Math.ceil(count / perPage) // 51

// コンテンツ

var html = '<thead><tr><th>ID</th><th scope="col">Content</th></tr></thead>';

var i;

for (i = (page - 1) * perPage + 1; i <= page * perPage && i <= count; i++) {

html += `<tbody><tr><th scope="row">${i}</th><td>これは${i}番目のコンテンツです。</td></tr>`;

}

document.getElementById('container').innerHTML = html;

// ページネーション

html = '';

if (page > 1) {

html += `<li class="page-item"><a class="page-link" href="?page=${page - 1}">前へ</a></li>`;

}

for (i = page - 2; i <= page + 2 && i <= maxPage; i++) {

if (i < 1) continue;

if (i == page) {

html += `<li class="page-item active"><a class="page-link" href="?page=${i}">${i}</a></li>`;

continue;

}

html += `<li class="page-item"><a class="page-link" href="?page=${i}">${i}</a></li>`;

}

if (page != maxPage) {

html += `<li class="page-item"><a class="page-link" href="?page=${page + 1}">次へ</a></li>`

}

document.getElementById('pagination').innerHTML = html;

// URLから指定したパラメータを取得

function getQueryParam($key) {

if (1 < document.location.search.length) {

var query = document.location.search.substring(1);

var parameters = query.split('&');

for (var i = 0; i < parameters.length; i++) {

// パラメータ名とパラメータ値に分割する

var element = parameters[i].split('=');

if (element[0] == $key) return element[1];

}

return null;

}

</script>

</body>

</html>

このコードを実行すると以下のようなページが表示されます。

肝心のページネーション機能はどうなっているかというと、

例えば「次へ」ボタンを押して10ページ目に遷移してみましょう。

1ページ目では無かった「前へ」ボタンが出現しました。

しっかりとページネーションのロジックが動作していることがわかります。

また、最後のページに行くと「次へ」ボタンがなくなります。

ここでもしっかりとページネーションのロジックが動作しています。

サンプルコードの解説

Bootstrapを使えるようにする

まずはBootstrapを使えるようにしましょう。

<head>内の「Bootstrap CSS」と<body>一番下の「jQuery first, then Tether, then Bootstrap JS.」に書いてあるコードで使えるようになります。

直接関係ありませんが、<head>内の「Required meta tags」も忘れないでくださいね。

Bootstrapを直接インストールする方法でも大丈夫です。

ページネーションを埋め込む準備をする

Bootstrapをインストールしたあとは、ページネーションを埋め込む準備をします。

<body>内に

コンテンツを埋め込むための<table>タグと

ページネーションを埋め込むために<nav>タグを作ります。

IDで識別できるようにするために、それぞれcontainerとpaginationという名前を振り分けます。

Javascriptでロジックを書く

ページ数を取得する

ページ数はURLにpageに関するパラメータを含めることで情報を取得することにしました。

具体的には、ページネーションを実装したURLを

https://ドメイン/pagination

とすると、

https://ドメイン/pagination?page=20

みたいな感じです。

URLからpageに関するパラメータを取得するために、getQueryParam()という関数を実装して使います。

コンテンツを生成（テスト用）

コンテンツは本来ならサーバーサイドでAPIを作るなりして取得するので

この部分はサーバーとの通信のロジックを書くところなのですが、今回は簡単のためにテスト用のコンテンツを自動生成して出力することにします。

ページネーション部分を生成

最後は最も重要なページネーションの部分です。

ここの動作を理解していれば、新しくページを作るときに自分好みにロジックを応用したりできるので覚えておくといいです。

現在のページが最初（１ページ）と最後のときは、それぞれ「前へ」ボタンと「次へ」ボタンが不要なのでif文でボタンを表示しないようにします。

BootstrapとJavascriptを使用したページネーションのサンプル

サンプルコード