Yura YuLife

ITエンジニアの覚え書き。

djangoのペジネータで、現在のページの前後数ページのみをリンクとして表示する

Djangoのペジネータを使ってリンクを表示するときに、Google検索みたいに前後数ページのリンクを表示する方法です。

f:id:yurayur:20150911184131p:plain

Googleの場合は前5ページ、後4ページを表示していますね。

環境

ペジネータで前後数ページを表示

views.py

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

def some_page(request):
    some_list = SomeObject.objects.all()
    page = request.GET.get('page')  # 現在表示中のページを取得

    # 1ページに10件ずつ表示
    paginator = Paginator(some_list, 10)
    try:
        paged_list = paginator.page(page)
    except PageNotAnInteger:
        paged_list = paginator.page(1)
    except EmptyPage:
        paged_list = paginator.page(paginator.num_pages)

    return render(request, 'some_page.html', {
        'paged_list ': paged_list
    })

some_page.html

<!-- ペジネータここから -->
{{ paged_list.start_index }}件目〜{{ paged_list.end_index }}件目を表示中 (全{{ paged_list.paginator.count }}件)</h4>
<div class="paginator">
  {% if paged_list.has_previous %}
    <a href="?page={{ paged_list.previous_page_number }}">前へ</a> 
  {% endif %}

  {% for page in paged_list.paginator.page_range %}
    <!-- 現在のページへはリンクを貼らない -->
    {% if page == paged_list.number %}
      <strong>{{ page }}</strong> 
    <!-- 現在表示しているページの前後5ページへのリンクを表示 -->
    {% elif paged_list.number|add:"-5" <= page and paged_list.number|add:"5" >= page %}
      <a href="?page={{ page }}">{{ page }}</a> 
    {% endif %}
  {% endfor %}

  {% if paged_list.has_next %}
    <a href="?page={{ paged_list.next_page_number }}">次へ</a>
  {% endif %}
</div>
<!-- ペジネータここまで -->

こんな感じで表示されます。

f:id:yurayur:20150911190050p:plain