Djangoページネーションでページ番号の一部のみを表示する
Django paginatorをテンプレートで使用しています。動作は問題ありませんが、ページ数が多い場合は適切ではありません。
views.py：
def blog(request):
blogs_list = Blog.objects.all()
paginator = Paginator(blogs_list, 1)
try:
page = int(request.GET.get('page', '1'))
except:
page = 1
try:
blogs = paginator.page(page)
except(EmptyPage, InvalidPage):
blogs = paginator.page(page)
return render(request, 'blogs.html', {
'blogs':blogs
})
テンプレートのスニペット：
<div class="prev_next">
{% if blogs.has_previous %}
<a class="prev btn btn-info" href="?page={{blogs.previous_page_number}}">Prev</a>
{% endif %}
{% if blogs.has_next %}
<a class="next btn btn-info" href="?page={{blogs.next_page_number}}">Next</a>
{% endif %}
<div class="pages">
<ul>
{% for pg in blogs.paginator.page_range %}
{% if blogs.number == pg %}
<li><a href="?page={{pg}}" class="btn btn-default">{{pg}}</a></li>
{% else %}
<li><a href="?page={{pg}}" class="btn">{{pg}}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
<span class="clear_both"></span>
</div>
これは次のようになります。
次のように、現在のページ番号の範囲ではなく、7つのページ番号のみを表示するにはどうすればよいですか。
Prev 1 (2) 3 4 5 Next
はっきりしているといいのですが、わからない場合は質問してください。あなたの助けと指導は非常に高く評価されます。ありがとうございました。
まず、私は以下を変更します：
try:
blogs = paginator.page(page)
except(EmptyPage, InvalidPage):
blogs = paginator.page(page) # Raises the same error
ただし、コンテキスト内で範囲を渡すことができます。
index = paginator.page_range.index(blogs.number)
max_index = len(paginator.page_range)
start_index = index - 3 if index >= 3 else 0
end_index = index + 3 if index <= max_index - 3 else max_index
page_range = paginator.page_range[start_index:end_index]
これで、範囲をループして?page=で正しいリンクを作成できるようになります。
===編集===
したがって、ビューは次のようになります。
def blog(request):
paginator = Paginator(Blog.objects.all(), 1)
try:
page = int(request.GET.get('page', '1'))
except:
page = 1
try:
blogs = paginator.page(page)
except(EmptyPage, InvalidPage):
blogs = paginator.page(1)
# Get the index of the current page
index = blogs.number - 1 # edited to something easier without index
# This value is maximum index of your pages, so the last page - 1
max_index = len(paginator.page_range)
# You want a range of 7, so lets calculate where to slice the list
start_index = index - 3 if index >= 3 else 0
end_index = index + 3 if index <= max_index - 3 else max_index
# Get our new page range. In the latest versions of Django page_range returns
# an iterator. Thus pass it to list, to make our slice possible again.
page_range = list(paginator.page_range)[start_index:end_index]
return render(request, 'blogs.html', {
'blogs': blogs,
'page_range': page_range,
})
そこで、テンプレートを編集して、ページ番号の新しいリストを受け入れる必要があります。
<div class="prev_next">
{% if blogs.has_previous %}
<a class="prev btn btn-info" href="?page={{blogs.previous_page_number}}">Prev</a>
{% endif %}
{% if blogs.has_next %}
<a class="next btn btn-info" href="?page={{blogs.next_page_number}}">Next</a>
{% endif %}
<div class="pages">
<ul>
{% for pg in page_range %}
{% if blogs.number == pg %}
<li><a href="?page={{pg}}" class="btn btn-default">{{pg}}</a></li>
{% else %}
<li><a href="?page={{pg}}" class="btn">{{pg}}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
<span class="clear_both"></span>
</div>
これを投入します。どちらかの側にさらにページがあることを通知するので、私はそれを思いつきました。
<ul class="pagination">
{% if page_obj.has_previous %}
<li><a href="?page={{ page_obj.previous_page_number }}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>
{% else %}
<li class="disabled"><span><i class="fa fa-chevron-left" aria-hidden="true"></i></span></li>
{% endif %}
{% if page_obj.number|add:'-4' > 1 %}
<li><a href="?page={{ page_obj.number|add:'-5' }}">…</a></li>
{% endif %}
{% for i in page_obj.paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% Elif i > page_obj.number|add:'-5' and i < page_obj.number|add:'5' %}
<li><a href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.paginator.num_pages > page_obj.number|add:'4' %}
<li><a href="?page={{ page_obj.number|add:'5' }}">…</a></li>
{% endif %}
{% if page_obj.has_next %}
<li><a href="?page={{ page_obj.next_page_number }}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
{% else %}
<li class="disabled"><span><i class="fa fa-chevron-right" aria-hidden="true"></i></span></li>
{% endif %}
</ul>
そしてそれは次のようになります：
テンプレートを使用した別の短いソリューションは、現在のforloop.counterを特定の範囲と比較することです。
bootstrap私はこのテンプレートを使用しています
<nav aria-label="Page navigation"> <ul class="pagination"> {% if page_obj.has_previous %} <li class="page-item"> <a class="page-link" href="?page=1" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">begin</span> </a> </li> {% endif %} {% for n in page_obj.paginator.page_range %} {% if page_obj.number == n %} <li class="page-item active"> <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span> </li> {% Elif n > page_obj.number|add:'-3' and n < page_obj.number|add:'3' %} <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li> {% endif %} {% endfor %} {% if page_obj.has_next %} <li class="page-item"> <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">end</span> </a> </li> {% endif %} </ul> </nav>
最も簡単な方法は、ページを表示するだけのページネーションスニペットを作成することです。
私の場合、前後のリンクは必要ありませんでした。私は常に最初と最後のページへのリンクを持ち、現在のページと現在のページの両側にある2つのページを表示したいと思っていました。
私のテンプレートスニペット（Django-tables2の変数を使用-Django Paginatorを直接使用している場合、変数の名前は少し異なります）
{% load Django_tables2 %}
{% load humanize %}
{% load i18n %}
{% if table.page %}
{% with table.page.paginator.count as total %}
{% with table.page.number as page_num %}
{% with table.page.paginator.num_pages as num_pages %}
{% block pagination %}
<div class="row">
<div class="col-md-12">
{% if table.paginator.num_pages > 1 %}
<ul class="pagination pull-right">
{% for n in table.page.paginator.page_range %}
{% if table.page.number|add:'-3' == n %}
{# First page #}
<li><a href="{% querystring table.prefixed_page_field=1 %}">1</a></li>
{% if n != 1 %}
<li class="disabled"><a>⋯</a></li>
{% endif %}
{% Elif table.page.number == n %}
{# Current page #}
<li class="active"><a href="#">{{ n }}</a></li>
{% Elif table.page.number|add:'-3' < n and n < table.page.number|add:'3' %}
{# Pages around current page #}
<li><a href="{% querystring table.prefixed_page_field=n %}">{{ n }}</a></li>
{% Elif table.page.number|add:'3' == n %}
{# Last page #}
{% if n != num_pages %}
<li class="disabled"><a>⋯</a></li>
{% endif %}
<li><a href="{% querystring table.prefixed_page_field=num_pages %}">{{ num_pages }}</a></li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</div>
</div>
{% endblock pagination %}
{% endwith %}
{% endwith %}
{% endwith %}
{% endif %}
別のページでのページネーションの例
クレジット：これは@ Pavel1114の回答に触発されました
Paginatorクラスを拡張することもできます。
class BootstrapPaginator(Paginator):
def __init__(self, *args, **kwargs):
"""
:param wing_pages: How many pages will be shown before and after current page.
"""
self.wing_pages = kwargs.pop('wing_pages', 3)
super(BootstrapPaginator, self).__init__(*args, **kwargs)
def _get_page(self, *args, **kwargs):
self.page = super(BootstrapPaginator, self)._get_page(*args, **kwargs)
return self.page
@property
def page_range(self):
return range(max(self.page.number - self.wing_pages, 1),
min(self.page.number + self.wing_pages + 1, self.num_pages + 1))
次にテンプレートで：
{% for num in action_list.paginator.page_range %}
{% if action_list.number == num %}
<li class="active"><a href="?page={{ num }}">{{ num }}</a></li>
{% else %}
<li><a href="?page={{ num }}">{{ num }}</a></li>
{% endif %}
{% endfor %}
今page_rangeは7アイテムのみで構成されます。 wing_pages +現在のページ+ wing_pagescustom Djangoブートストラップのページネーター
私は式を含むテンプレートでのみそれを行いました：
{% if is_paginated %}
<div class="text-center">
<ul class="pagination pagination-sm">
{% if page_obj.number >= 5 %}
<li><a href="?page=1">1</a></li>
<li><span>...</span></li>
{% Elif page_obj.number == 4 %}
<li><a href="?page=1">1</a></li>
{% endif %}
{% if page_obj.number|add:"-2" >= 1 %}
<li><a href="?page={{ page_obj.number|add:"-2" }}">{{ page_obj.number|add:"-2" }}</a></li>
{% endif %}
{% if page_obj.number|add:"-1" >= 1 %}
<li><a href="?page={{ page_obj.number|add:"-1" }}">{{ page_obj.number|add:"-1" }}</a></li>
{% endif %}
<li class="active"><a href="?page={{ page_obj.number }}">{{ page_obj.number }}</a></li>
{% if page_obj.number|add:"1" <= paginator.num_pages %}
<li><a href="?page={{ page_obj.number|add:"1" }}">{{ page_obj.number|add:"1" }}</a></li>
{% endif %}
{% if page_obj.number|add:"2" <= paginator.num_pages %}
<li><a href="?page={{ page_obj.number|add:"2" }}">{{ page_obj.number|add:"2" }}</a></li>
{% endif %}
{% if page_obj.number|add:"2" <= paginator.num_pages|add:"-2" %}
<li><span>...</span></li>
<li><a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
{% Elif page_obj.number|add:"1" <= paginator.num_pages|add:"-2" %}
<li><a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
{% endif %}
</ul>
</div>
{% endif %}
Djangoは「もうコードを記述しないでください」のようなものですが、今すぐ理解できるようになりました。
@ Pavel1114 と @ Inti に触発されました。最初と最後の矢印はあまり役に立たないので削除しました。高速アクセスのための最初のページと最後のページを追加しました。
<ul>
<li class="grp-results">
<span>{{paginator.count}} total</span>
</li>
{% if data.number|add:'-4' > 1 %}
<li><a href="?page=1">1</a></li>
<li><a href="?page={{ data.number|add:'-5' }}">…</a></li>
{% endif %}
{% for i in data.paginator.page_range %}
{% if data.number == i %}
<li class="active"><span>{{ i }}</span></li>
{% Elif i > data.number|add:'-3' and i < data.number|add:'3' %}
<li><a href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if data.paginator.num_pages > data.number|add:'4' %}
<li><a href="?page={{ data.number|add:'5' }}">…</a></li>
<li><a href="?page={{ data.paginator.count }}">{{ data.paginator.count }}</a></li>
{% endif %}
</ul>