1. 程式人生 > >十三.通過pagination對頁面進行分頁

十三.通過pagination對頁面進行分頁



view中,我們建立一個分頁函式pagination,並單獨建立一個分頁機制的檔案,以供所有表格分頁時使用。

1.views中建立pagination函式,用於分頁。為了測試方便,我們每頁僅顯示2條記錄。

Views.py:

#分頁函式
def pagination(request, queryset, display_amount=2, after_range_num = 5,before_range_num = 4):
    #按引數分頁
    try:
        #從提交來的頁面獲得page的值
        page = int(request.GET.get("page", 1))
        #如果page值小於1,那麼預設為第一頁
        if page < 1:
            page = 1
    #若報異常,則page為第一頁
    except ValueError:
            page = 1
    #引用Paginator類
    paginator = Paginator(queryset, display_amount)
    #總計的資料條目
    count = paginator.count
    #合計頁數
    num_pages = paginator.num_pages

    try:
        #嘗試獲得分頁列表
        objects = paginator.page(page)
    #如果頁數不存在
    except EmptyPage:
        #獲得最後一頁
        objects = paginator.page(paginator.num_pages)
    #如果不是一個整數
    except PageNotAnInteger:
        #獲得第一頁
        objects = paginator.page(1)
    #根據引數配置導航顯示範圍
    temp_range = paginator.page_range

    #如果頁面很小
    if (page - before_range_num) <= 0:
        #如果總頁面比after_range_num大,那麼顯示到after_range_num
        if temp_range[-1] > after_range_num:
            page_range = xrange(1, after_range_num+1)
        #否則顯示當前頁
        else:
            page_range = xrange(1, temp_range[-1]+1)
    #如果頁面比較大
    elif (page + after_range_num) > temp_range[-1]:
        #顯示到最大頁
        page_range = xrange(page-before_range_num,temp_range[-1]+1)
    #否則在before_range_num和after_range_num之間顯示
    else:
        page_range = xrange(page-before_range_num+1, page+after_range_num)
    #返回分頁相關引數
    return objects, page_range, count, num_pages

2. 在之前的列表函式中,呼叫pagination函式,從而對具體的data資料來進行分頁處理:

def lists(request, table):
…
#將分頁的資訊傳遞到展示頁面中去
data_list, page_range, count, page_nums = pagination(request, data)
#建立context字典,將值傳遞到相應頁面
context = {
    'data': data_list,
    'table': table,
    'page_range': page_range,
    'count': count,
    'page_nums': page_nums,
    'sub_title': sub_title,
}
#跳轉到相應頁面,並將值傳遞過去
return render(request,list_template,context)

3.建立單獨的html,存放pagination的顯示內容。

Pagination.html:

<pre class="html" name="code"><div class="col-xs-12">
                                <div class="col-xs-6">
                                <ul class="pagination">共{{ page_nums }}頁 {{ count }}條記錄</ul>
                                </div>
                                        <div class="col-xs-6 align-right ">
                                    <ul class="pagination ">

                                    <!--如果資料還有前頁,則上一頁按鈕有效-->
                                    {% if data.has_previous %}
                                    <li><a href="?page={{ data.previous_page_number }}{{ query }}">上一頁</a></li>
                                    {% else %}
                                    <li class="active"><a>上一頁</a></li>
                                    {% endif %}
                                    <!--分頁展示,當前在哪頁,當前頁的按鈕無法使用-->
                                    {% for p in page_range %}

                                      {% ifequal p data.number %}
                                      <li class="active"><a>{{p}}</a></li>
                                      {% else %}
                                      <li><a href="?page={{p}}{{ query }}" title="第{{p}}頁">{{p}}</a><li>
                                      {% endifequal %}
                                    {% endfor %}
                                       <!--如果資料還有後頁,則下一頁按鈕有效-->
                                    {% if data.has_next %}
                                    <li><a href="?page={{ data.next_page_number }}{{ query }}">下一頁</a></li>
                                    {% else %}
                                    <li class="active"> <a>下一頁</a></li>
                                    {% endif %}

                                    </ul>
                                       </div>
</div>

4.res_list.html中載入pagination.html。如果有頁面需要呼叫分頁功能,今後直接在views.py中進行處理,並載入該pagination.html頁面即可。

table的下面引用pagination.html

Res_list.html:

<!--引入modal.html-->
{% include 'modal.html' %}
 <!--引入pagination.html-->
{% include 'pagination.html' %}

5.測試效果: