一、分頁功能開發

前幾章我們開發了首頁，資料表展示頁，以及資料過濾功能，這一節開發分頁功能。

如果資料比較多的情況，不可能都在一頁顯示，所以需要開發分頁功能。

二、分頁功能，這裡使用Django自帶的分頁。

1、首先了解一下Django的分頁：

檢視官方文件：https://docs.djangoproject.com/zh-hans/2.1/topics/pagination/

objects = ['john', 'paul', 'george', 'ringo']

p = Paginator(objects, 2)  #表示把這個列表每頁展示兩個

p.num_pages  #計算總共有多少頁

type(p.page_range)
<class 'range_iterator'> #計算頁碼範圍，可以看出p.page_range這是個迭代器，翻到哪頁就顯示哪頁的資料
 

p.page_range
range(1, 3) #計算頁碼範圍，包含第一個，不包含最後一個數字

>>> 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()
Traceback (most recent call last):
...
EmptyPage: That page contains no results
 

Django官方用法例項：假如有一個合同資料表，裡邊有許多合同資料，給這個資料分頁
檢視函式：

from django.shortcuts import render

def listing(request):
    contact_list = Contacts.objects.all()   #得到所有的資料集合
    paginator = Paginator(contact_list, 25) # Show 25 contacts per page #分頁

    page = request.GET.get('page') #得到當前頁碼
    contacts = paginator.get_page(page)  #當前頁碼 對應頁面顯示的資料集合
    return render(request, 'list.html', {'contacts': contacts})
 

templates用法例項：

{% for contact in contacts %}

{# Each "contact" is a Contact model object. #}

    {{ contact.full_name|upper }}<br>
    ...
{% endfor %}

<div class="pagination">
    <span class="step-links">
        {% if contacts.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ contacts.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
        </span>

        {% if contacts.has_next %}
            <a href="?page={{ contacts.next_page_number }}">next</a>
            <a href="?page={{ contacts.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>
</div>

2、通過以上官方文件講解，基本可以明白，用法就是對於 一堆資料集合，給它分頁，然後通過request得到當前頁，然後把當前頁的資料顯示到當前頁面上，然後使用分頁的next,previous等方法，顯示上一頁和下一頁

接下來具體開發：

修改檢視函式：

在HTML上新增如下程式碼：

顯示效果如圖：

但是點選next時，會報錯，原因是把頁碼當成了過濾查詢條件：

需要作如下修改：

修改後，可以正常翻頁：

3、這麼顯示比較簡陋，給它修改一下：

還是從bootstrap上使用，比較方便：https://v3.bootcss.com/components/#pagination

我們使用這個分頁，能調節按鈕大小：

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

具體美化目前不是很懂，先參考一下別人寫的：

tags:

html頁面：

顯示效果如圖：

五、功能完善

1、之前只開發了設定了自定義的表的資料展示，沒有新增自定義的表，點開沒有資料展示，這裡完善一下。

這裡需要修改build_table_row,

修改後效果如圖，資料顯示正確，但是多了個過濾按鈕：

這個按鈕是前端顯示的，因此在前端加一個判斷：

有自定義過濾的就顯示過濾，沒有的就不顯示

修改後顯示效果如圖：

2、每個表對應的應用名字，之前使用APP_NAME代替，現在給它顯示出來：

由於前端不能顯示下劃線，因此還是通過tag返回給前端

顯示效果如圖：

每個表再加一個表名：

顯示效果如圖：