1. 程式人生 > >HTML 基於 Python 實現分頁功能

HTML 基於 Python 實現分頁功能

ner mode 一個 div 樣式 def navi itl import

前面的話:

1. 網頁引用的bootstrap 中的表格,所以需要引入樣式類

2. 第一次寫文章,不喜勿噴。有不足的地方,可留言我改正,在此先謝過。

HTML代碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分頁</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>
<body>

<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>序號</th>
<th>編號</th>
<th>名字</th>
</tr>
</thead>
{% for user in user_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
</tr>
{% endfor %}
</table>
<nav aria-label="Page navigation">
<ul class="pagination">

{{ page_html|safe }} <!--傳值--!>

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

</body>
</html>


views代碼:

from django.shortcuts import render, redirect, HttpResponse
from app01 import models
# Create your views here.

def page(request):
# 從url取參數
page_num = request.GET.get("p")
# 求總頁數,每頁顯示10條數據
total_data = models.Books.objects.all().count()
total_page, i = divmod(total_data, 10) # divmod運算可取到整數和余數分別保存在total_page,i 中
try:
page_num = int(page_num)
if page_num > total_page:
page_num = total_page
except Exception as e:
page_num = 1
# 定義兩個變量保存起始數據
print(page_num)
data_start = (page_num-1)*10 + 1
data_end = page_num*10


if i:
total_page = total_page + 1 # 判斷如有余數,加1頁


# 頁面上總共展示多少頁面
max_page = 7
if total_page <= max_page:
max_page = total_page
half_max_page = max_page // 2
# 頁面上展示的頁碼從哪兒開始
page_start = page_num - half_max_page

# 頁面上展示的頁碼到哪兒結束
page_end = page_num + half_max_page
# 前部分
if page_start <= 1:
page_start = 1
page_end = max_page
# 後部分
if page_end > total_page:
page_end = total_page
page_start = total_page - max_page + 1
# 自己拼接分頁的HTTML代碼
html_str_list = []
# 加上首頁
html_str_list.append(‘<li><a href="/page/?p=1">首頁</a></li>‘)
# 加上上一頁
if page_num <= 1:
html_str_list.append(
‘<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>‘)
else:
html_str_list.append(
‘<li><a href="/page/?p={0}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>‘.format(
page_num - 1))

for i in range(page_start, page_end+1):
# 如果是當前頁就加一個active樣式類
if i == page_num:
tem = ‘<li class="active"><a href="/page/?p={0}">{0}</a></li>‘.format(i)
else:
tem = ‘<li><a href="/page/?p={0}">{0}</a></li>‘.format(i) #括號裏要寫0
html_str_list.append(tem)
# 加上下一頁
if page_num >= total_page:
html_str_list.append(
‘<li class="disabled"><a href="#" aria-label="Next">‘‘<span aria-hidden="true">&raquo;</span></a></li>‘)
else:
html_str_list.append(
‘<li><a href="/page/?p={0}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>‘.format(
page_num + 1))
# 加最後一頁
html_str_list.append(‘<li><a href="/page/?p={0}">尾頁</a></li>‘.format(total_page))
page_html = "".join(html_str_list)

# all_user = models.UserInfo.objects.all()[10: 20]
all_user = models.Books.objects.filter(id__gte=data_start, id__lte=data_end)
print(all_user)
return render(request, "page.html", {"user_list": all_user, "page_html": page_html})

HTML 基於 Python 實現分頁功能