1. 程式人生 > >Django框架(十五)—— Django分頁組件

Django框架(十五)—— Django分頁組件

ber rip page span 如果 布爾 npm 獲取 gin

Django分頁組件

一、分頁器

數據量大的話,可以分頁獲取,查看

例如:圖書管理中,如果有成千上萬本書,要是都在一個頁面中渲染出來,會影響頁面美觀,所以就要用分頁器分頁渲染

二、分頁器的使用

基本寫法

基本寫法:
    後端:
        總數據拿出來
        生成分頁器Paginator對象(對象裏有屬性和方法)
        生成當前頁的對象,current_page=paginator.page(當前頁碼)
        取出前臺傳過來的頁碼,current_page_num = int(request.GET.get(‘page‘))
            -需要有異常捕獲
            -捕獲到,把當前頁碼設置成第一頁
    
    
    前端:
        -for循環總頁列表
        -點某一頁,跳到指定頁碼,<li><a href="/index/?page={{ foo }}">{{ foo }}</a></li>
        
        -上一頁,下一頁的處理:需要有判斷,判斷是否有上一頁,下一頁
        # 判斷總頁碼數是否大於11,不大於11,走else:把總頁碼數,賦給page_range(前端循環頁碼列表,循環的就是page_range)
            if paginator.num_pages >11:
                # 當前頁碼數-5大於1的時候,page_range應該是,page_range就是1到11頁?
                if current_page_num-5<1:
                    page_range=range(1,12)
                elif current_page_num+5>paginator.num_pages:
                    # 當前頁碼數+5大於總頁碼數,總頁碼-10,到總頁碼+1之間
                    page_range=range(paginator.num_pages-10,paginator.num_pages+1)
                else:
                    #其他情況,左5,右6推算,也就是:range(current_page_num - 5, current_page_num + 6)
                    page_range = range(current_page_num - 5, current_page_num + 6)
            else:
                #小於11,有多少頁,就顯示多少頁
                page_range=paginator.page_range
from django.core.paginator import Paginator

# 對象參數
1. Paginator對象:    paginator = Paginator(user_list, 10)
# per_page: 每頁顯示條目數量


# count:    數據總個數
count = paginator.count

# num_pages:總頁數,它是一個對象的方法,通過裝飾器偽裝成對象屬性
page_num = paginator.num_pages

# page_range:總頁數的索引範圍,如: (1,10),(1,200)
PageRange = paginator.page_range

# page:     page對象,傳一個數字,假如你想取到第1頁,就傳1進去,會返回一個page對象,這個對象裏是當前頁的一些對象
page_obj = paginator.page(1)

2. page對象:page=paginator.page(1)
# has_next              是否有下一頁,它的返回值是一個布爾類型
page.has_next()

# next_page_number      下一頁頁碼,它的返回值是一個int類型
page.next_page_number()

# has_previous          是否有上一頁,它的返回值是一個布爾類型
page.has_previous()

# previous_page_number  上一頁頁碼,它的返回值是一個int類型
page.has_previous()

# object_list           分頁之後的數據列表
page.object_list()

# number                當前頁
page.number()

# paginator             paginator對象

三、案例

1、模板層

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Title</title>
</head>
<body>
<div class="row">
    <div class="col-md-6 col-md-offset-3">

        <table class="table table-striped">
            <thead>
            <tr>
                <th>書名</th>
                <th>價格</th>
            </tr>
            </thead>
            <tbody>
            {% for book in current_page %}
                <tr>
                    <td>{{ book.name }}</td>
                    <td>{{ book.price }}</td>
                </tr>
            {% endfor %}

            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if current_page.has_previous %}
                    <li>                       
                        <a href="/index/?page={{ current_page.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">上一頁</span>
                        </a>
                    </li>
                {% else %}
                    <li class="disabled">
                        <a href="" aria-label="Previous">
                            <span aria-hidden="true">上一頁</span>
                        </a>
                    </li>
                {% endif %}

                {% for foo in page_range %}
                    {% if current_page_num == foo %}
                        {# 當前頁碼等於循環到的頁碼數,變色#}
                        <li class="active"><a href="/index/?page={{ foo }}">{{ foo }}</a></li>
                    {% else %}
                        <li><a href="?page={{ foo }}">{{ foo }}</a></li>
                    {% endif %}
                {% endfor %}


                {% if current_page.has_next %}
                    <li>
                        {#                    <a href="/index/?page={{ current_page_num|add:1 }}" aria-label="Next">#}
                        <a href="/index/?page={{ current_page.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">下一頁</span>
                        </a>
                    </li>
                {% else %}
                    <li class="disabled">
                        <a href="" aria-label="Next">
                            <span aria-hidden="true">下一頁</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>

</div>
</body>
</html>

2、視圖層

def index(request):
    book_list = models.Book.objects.all()
    paginator = Paginator(book_list, 3)
    # 如果頁碼數多,讓它顯示前5,後5,中間是當前在的頁碼
    try:

        current_page_num = int(request.GET.get(‘page‘))
        current_page = paginator.page(current_page_num)
        print(current_page.object_list)
        # 總頁碼數,大於11的時候
        if paginator.num_pages >11:
            # 當前頁碼數-5大於1的時候,page_range應該是?
            if current_page_num-5<1:
                page_range=range(1,12)
            elif current_page_num+5>paginator.num_pages:
                #     當前頁碼數+5大於總頁碼數,總頁碼數往前推11個
                page_range=range(paginator.num_pages-10,paginator.num_pages+1)
            else:
                page_range = range(current_page_num - 5, current_page_num + 6)
        else:
            #小於11,有多少頁,就顯示多少頁
            page_range=paginator.page_range
    except Exception as e:
        current_page_num = 1
        current_page = paginator.page(current_page_num)

    return render(request, ‘index_next.html‘, locals())

Django框架(十五)—— Django分頁組件