Django 中的分頁

準備工做

  先在models中建一個Engineer類,插入一些數據。css

起步

分頁器對象的方法

方法 描述
page 返回一個Page對象
count 返回對象列表(數據)的長度
num_pages 返回總頁數
page_range 返回頁碼列表

Page對象的方法

方法  描述
has_next  是否有下一頁
has_previous  是否有上一頁
has_other_pages  是否有上一頁或下一頁
next_page_number  返回下一頁的頁碼
previous_page_number  返回上一頁的頁碼
start_index  返回當前頁起始的對象序號
end_index  返回當前頁結束的對象序號

 

views函數中的寫法

from django.core.paginator import Paginator
def get_data(req,num):
    # 解析參數
    page_num = num
    # 查出全部數據
    data = Engineer.objects.all()
    # 實例化分頁器
    paginator = Paginator(data,PER_PAGE)
    # 經過傳過來的頁碼,得到page對象
    page = None
    try:
        page = paginator.page(page_num)
        # 讀取page對象數據,返回給前端
        result = page.object_list
    except:
        result = []
    res = {
        'data': result,
        'page_range': paginator.page_range,
        'page':page,
        'page_count':paginator.num_pages,
           }
    return render(req,'data.html',res)

url中的路由配置

from django.conf.urls import url
from app import views

urlpatterns = [
    url(r"^get_data/(\d+)",views.get_data),
]

前端頁面寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul>
    {% for i in data %}
        <li>{{ i.name }}的年紀是{{ i.age }}</li>
    {% empty %}
        <h1>沒有數據了</h1>
    {% endfor %}
</ul>

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            {% if page.has_previous %}
                <a href="/app/get_data/{{page.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">上一頁</span>
                </a>
            {% else %}
                <a href="/app/get_data/1" aria-label="Previous">
                    <span aria-hidden="true">上一頁</span>
                </a>
            {% endif %}
        </li>
            {% for p in page_range %}
                <li><a href="/app/get_data/{{ p }}">{{ p }}</a></li>
            {% endfor %}
        <li>
            {% if page.has_next %}
                <a href="/app/get_data/{{ page.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">下一頁</span>
                </a>
            {% else %}
                <a href="/app/get_data/{{ page_count }}" aria-label="Next">
                    <span aria-hidden="true">下一頁</span>
                </a>
            {% endif %}
        </li>
    </ul>
</nav>
</body>
</html>
相關文章
相關標籤/搜索