Django+boostrap分頁(1)

源起

我想要優雅地使用bootstrap+ django pagination來實現分頁，突然發現不知道該如何作起 我照葫蘆畫瓢知道了bootstrap怎麼使用列表組件，也大概知道怎麼使用pagination,可是放到一塊兒我就完全懵逼了。

資料收集

bootstrap 基本分頁演示

<div class="pagination">
      <ul>
        <li><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </div>

若是想使用禁用和活動狀態，能夠使用".disable"和".active"選項。

參見：bootstrap分頁說明.

Pageination能夠作的事情

首先，Paginator是一個類，它初始化時接受一個列表或者元組或者是Django的查詢結果集(queryset)，以及分組大小，而後生成一個具備一系列屬性的對象。下面的代碼演示瞭如何初始化以及操做Pageination對象，不要擔憂示例裏操做的是列表，徹底能夠拿來操做查詢結果。

from django.core.paginator import Paginator
objects = ['john', 'paul', 'george', 'ringo']
p = Paginator(objects, 2)
print(p.count) #4
print(p.num_pages)#2
print(p.page_range) #range(1,3)，2.x是[1,2]

page1 = p.page(1)
page1
<Page 1 of 2>
page1.object_list
['john', 'paul']

page2 = p.page(2)
page2.object_list #['george', 'ringo']
page2.has_next()    #False
page2.has_previous() #True
page2.has_other_pages()#True
page2.next_page_number()#返回錯誤信息
page2.previous_page_number()#1
page2.start_index() # 本頁的第一個項：3
page2.end_index() # 本頁的最後一個項：4
p.page(0)
Traceback (most recent call last):
'''
上面的例子能夠看到一些有價值的信息，Paginator對象能夠返回count計數，num_pages頁數,以及一個枚舉對象page_range,分頁大小：p.per_page。做爲當前頁，p.page(1)，能夠退單上一頁和下一頁，本頁的開始和結束序號、
'''

能夠在接受到適當的請求時，向模板返回一個適當的分頁對象上下文，模板根據上下文來生成分頁

初步構想的模板文件。

模板中迭代pages生成分頁html代碼

實踐

花了點時間初步實現了下，原本就是很簡單的東西，沒什麼好說的,爲了方便演示，使用列表代替Queryset做爲查詢對象

視圖函數

#views.py
from django.shortcuts import render
from django.core.paginator import Paginator

#上下文將pages,current_page傳入到模板文件中
def page_view(request,page_number = '1'):
    #看到這個不用困惑，就當成教材裏的pages=Article.objects.all()這樣的查詢結果好了
    pages = list(range(100))
    p = Paginator(pages,8)
    current_page = p.page(int(page_number))
    context ={'pages':p,'current_page':current_page}
    return render(request,'blogs/page.html',context)

URL配置

#這裏一切從簡，只是爲了製造一個能夠傳入參數的，形式爲/page/{number}的url而已，若是你不明白
#我在作什麼，那說什麼都是多餘的
from django.conf.urls import url
from blogs import views
urlpatterns = [
                url(r'^page/(?P<page_number>\d+)$',views.page_view,name = "page"),
                ]

模板配置

//假定傳入了分頁器pages和當前頁current_page.

<!--這裏集成模板導入的bootstrap js和css就不展現了-->
{% extends 'blogs/base.html' %}
{% block page_block %}
<ul class = 'pagination'>
//首先若是有前一頁，則生成前一頁
{% if current_page.has_previous %}
    <li class = 'previous'>
        <a href =  {{ current_page.previous_page_number }}>上一頁</a>
    </li>
{% endif %}
{% for number in pages.page_range %}
    <li
        {% if number == current_page.number %}
            class = "activate"
        {% endif %}>
        <a href =  {{ number }}>{{ number }}</a>
    </li>
{%  endfor %}
//讓後若是當前頁有後一頁，則生成後一頁
{% if current_page.has_next %}
    <li class = 'next'>
        <a href = {{ current_page.next_page_number }}>下一頁</a>
    </li>
{% endif %}
</ul>
{% endblock %}

最終結果

最後

這個效果怎麼說呢，django自帶的模板看起來和jinjia2很像，實際上有那麼一點變扭。

bootstrap生成列表不用太費神，可是一次顯示這麼多分頁彷佛也不是很妥，還能夠縮減下可視的列表範圍