ページネーション（Bootstrap）とレスポンシブ対応（rpage）

今回の記事では、主にページネーション機能の実装について書いていきます。ページネーションとは記事や検索結果をすべて表示するのではなく、複数のページに分割して1ページでは10件だけ表示するような以下の画像みたいなやつです。

Bootstrapによるページネーション

まずはHTMLでページネーションを作っていきます。Bootstrapによるページネーションを利用すると簡単なのでこちらを利用していきます。
getbootstrap.jp

レスポンシブ対応

上記のページネーションは、簡単に実装できますが、レスポンシブ対応になっていません。なのでページ数や画面サイズによっては2行、3行となってしまいきれいではないです。そこで、レスポンシブ対応にしていきたいのですが、そのためにはサードパーティー製の「rpage」というライブラリを使います。
github.com
上のGitHubレポジトリをダウンロードしてresponsive-paginate.jsをディレクトリ以下好きな場所に配置します。HTMLファイルでこのファイルを呼び出し、以下のコードを記述するだけで動きます。非常に簡単です！

$(document).ready(function () {
    $(".pagination").rPage();
});

ただBootstarpのコードをコピペしただけだとうまく動かないと思います。綺麗に表示させるためにいくつか変更を加えます。

デフォルトのNext、Previousを消す

これを

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

このようにします。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

「rpage」のGitHubページに書いてあるNext、Previousを追加

以下のコードを加えclassに「page-link」を記述（Next、Previous、disableのところ）

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="pagination-prev"><a href="#" class="page-link">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="pagination-next"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

うまく幅が調整できないとき

一部がはみ出してしまう時などは、responsive-paginate.jsの４４行目にある以下の数字を変更（例：10→100）

while (width > this.els.parent().parent().width() - 10)

ページネーションを大きいサイズにする

Bootstarp公式のやり方でHTMLのコードをclass="pagenation pagenation-lg" (pagenation-lg追加）に変更するとともに、「rpage」における「...」を大きくするために以下のようにresponsive-paginate.jsの106、110行目のspanに「style='display: inline-block!important;padding: .75rem 1.5rem;'」を追加

this.els.eq(farthest_index - 2).before("<li class='disabled removable'><span　style='display: inline-block!important;padding: .75rem 1.5rem;'>...</span></li>");

「...」を「･･･」に変更

上記のspanの中だけでなく76、137行目のIF文も変更

if (element.text() == "･･･")

Djangoにおけるページネーション

今までの内容でフロント部分は実装できると思います。最後に、Djangoのプロジェクトで、バックエンド側におけるページネーションを実装する時に参考にしたURLを貼っておきます。
office54.net