2015-06-16 33 views
12

我在模板中使用了django分页程序。它的工作正常,但有很多页面时不好。仅显示部分页码,按django分页

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> 

现在看起来是这样的:

enter image description here

我该怎么办,只显示7页码,并不是所有的范围从当前页码,如下所示:

Prev 1 (2) 3 4 5 Next 

我希望我很清楚,如果不是请问。您的帮助和指导将非常感谢。谢谢。所有的

回答

17

首先,我会改变如下:

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> 
+1

我很抱歉,我没有得到你。你能否详细说明一下。 – Robin

+0

@Robin,看看我的变化。 – Blackeagle52

+0

太棒了!有效!谢谢。 – Robin

1

您还可以扩展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 paginator for bootstrap

0

我表情做到了只在模板:

{% 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是像“不要写一遍代码”,但我发现这个容易,我现在明白。希望我帮助。

12

模板的另一个较短的解决方案是比较当前forloop.counter与一定范围。

与引导我用这个模板

<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">&laquo;</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">&raquo;</span> 
     <span class="sr-only">end</span> 
    </a> 
    </li> 
    {% endif %} </ul> </nav> 

screenshot

+0

我最喜欢这个答案,更短更容易理解\ – ColinMasters

1

,我发现最简单的做法是创建一个分页片段,只是表明你想让它的网页。

在我的情况下,我不想要任何上一个或下一个链接。我只是想始终有一个链接到第一页和最后一页,然后在当前页面的两侧都有当前页面和两页。

我的模板片段(使用从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>&#8943;</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>&#8943;</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 %} 

例子

1

2

3

4

5

6

信用:这是由@ Pavel1114的回答启发

8

要去扔在这,我想出了它,因为它可以让你知道有。更多的页面在任何一方。

<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' }}">&hellip;</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' }}">&hellip;</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> 

它看起来是这样的:

Paging with elipses