在学习完Django的MTV模型后,知道了Django的架构,可以写出复杂的应用了.但是离一个完整的web站点,还差了最核心的比如站点管理和用户等功能.因此还需要知道Django中与用户和状态相关的高级功能,以及其他一些高级操作.
分页
分页是很多内容管理站点必须有的功能,像博客和论坛,一般是在每页上展示固定数量的内容,然后通过翻页前后翻动,如果在一页上展示太多内容,用户体验会很差.
我们先通过 bulk_create方式大量创建一些书,然后用一个页面将其一次性展示出来,可以看到用户体验很差.
通过切片进行分页
如果想每页显示10个,首先想到的是在视图函数内按照排序取得所有对象之后,由于QuerySet是一个列表,只要进行切片就可以了.第n页的索引范围是[(n-1)*10:n*10].那么关键就是要取到n,可以通过页面里让用户选第几页,然后返回?page=n这样来取得.
然后还一个问题,就是一共多少页呢,这里可以很方便的对QuerySet使用.count()方法获取总数,然后用总数除以10并且取商和余数,如果余数为0,则商就是页数,如果余数不为0,总页数就是商+1.
根据数量,生成一个按钮的清单表示第几页.注意,如果余数不为0,实际上最后一页的索引就应该单独处理,如果余数为0,则不用特殊处理,每页显示相同的页面.
此外,引入了Bootstrap的分页组件,分页组件除了页数之外,还有一个前一页和后一页,这两个也很简单,将当前的页面传入模板,然后判断一下,当页数为1的时候上一页依然是1,当页数为最后一页的时候下一页依然是最后一页.
最后还有一个active状态,同样只要写一个if判断即可.
基础的分页逻辑
def book_list(request):
# 用一个变量表示每页显示的数量
page_per_html = 10
# 取得GET方法传入的当前页数
page_num = int(request.GET.get("page", 1))
# 取得数据库内所有要显示的记录的数量
all_book = models.Book.objects.all().order_by("id")
all_book_num = all_book.count()
# 计算商和余数,用于计算总共有几页和最后一页的处理
page, last = divmod(all_book_num, page_per_html)
# 余数为0,则为整数页面,计算出页面中需要的各个元素.
if last == 0:
page_li = [i + 1 for i in range(page)]
previous = page_num - 1 if page_num - 1 >= 1 else 1
next = page_num + 1 if page_num + 1 <= page else page all_book = all_book[(page_num - 1) * page_per_html:page_num * page_per_html]
return render(request, "books.html", {"book_list": all_book, "page": page_li, "previous": previous, "next": next, "current": page_num})
else:
# 余数为1,则页面数需要加1,同时对最后一页进行特别处理
page += 1
page_li = [i + 1 for i in range(page)]
previous = page_num - 1 if page_num - 1 >= 1 else 1
next = page_num + 1 if page_num + 1 <= page else page
if page_num != page:
all_book = all_book[(page_num - 1) * page_per_html:page_num * page_per_html]
return render(request, "books.html",
{"book_list": all_book, "page": page_li, "previous": previous, "next": next,
"current": page_num})
else:
all_book = all_book[(page_num - 1) * page_per_html:(page_num - 1) * page_per_html + last + 1]
return render(request, "books.html",
{"book_list": all_book, "page": page_li, "previous": previous, "next": next,
"current": page_num})
页面编写如下:
<div class="container">
<h1 class="text-center">书籍列表</h1>
<table class="table table-striped table-bordered tab">
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>书名</th>
</tr>
</thead>
<tbody>
{% for book in book_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="btn btn-group">
</div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="/books/?page={{ previous }}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% for i in page %}
<li><a href="/books/?page={{ i }}"
class="btn btn-primary {% if i == current %}active{% endif %} }">{{ i }}</a></li>
{% endfor %}
<li>
<a href="/books/?page={{ next }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
目前记录只有100多条,每页显示10条,看上去还比较合理,如果内容比较多,比如有1000条,会发现分页导航条会显示一大片,而成熟的网页一般会控制总共展示的页码数量.经过分析,只需要修改视图函数,控制传入给页面生成页码导航条的语句的列表即可.
改进每页显示固定的页码数量
def book_list(request):
page_per_html = 5
page_num = int(request.GET.get("page", 1))
all_book = models.Book.objects.all().order_by("id")
all_book_num = all_book.count()
max_page = 11
half_num = max_page//2
page, last = divmod(all_book_num, page_per_html)
if last == 0:
# 新的修改在这里,用于控制每次传入分页导航的列表,长度固定为11,当前页小于5的时候,固定是range(11)+1也就是1到11,当前页大于总页数-5的时候,固定是range(页数-11,页数)+1,即最后11页.其他的情况,就从当前页-6到当前页+5的结果再加1,正好就是以当前页面左右各5的数字.
if page_num - half_num < 1: page_li = [i + 1 for i in range(max_page)] elif page_num + half_num > page:
page_li = [i + 1 for i in range(page - max_page, page)]
else:
page_li = [i + 1 for i in range(page_num - half_num-1, page_num + half_num)]
previous = page_num - 1 if page_num - 1 >= 1 else 1
next = page_num + 1 if page_num + 1 <= page else page
all_book = all_book[(page_num - 1) * page_per_html:page_num * page_per_html]
return render(request, "books.html",
{"book_list": all_book, "page": page_li, "previous": previous, "next": next, "current": page_num})
else:
page += 1
# 新的修改与上边一样,只是page数不同.
if page_num - half_num < 1: page_li = [i + 1 for i in range(max_page)] elif page_num + half_num > page:
page_li = [i + 1 for i in range(page - max_page, page)]
else:
page_li = [i + 1 for i in range(page_num - half_num-1, page_num + half_num)]
previous = page_num - 1 if page_num - 1 >= 1 else 1
next = page_num + 1 if page_num + 1 <= page else page
if page_num != page:
all_book = all_book[(page_num - 1) * page_per_html:page_num * page_per_html]
return render(request, "books.html",
{"book_list": all_book, "page": page_li, "previous": previous, "next": next,
"current": page_num})
else:
all_book = all_book[(page_num - 1) * page_per_html:(page_num - 1) * page_per_html + last + 1]
return render(request, "books.html",
{"book_list": all_book, "page": page_li, "previous": previous, "next": next,
"current": page_num})
这样就初步做好了一个分页的功能,通过page_per_html变量控制每页显示的记录,通过将max_page设置为奇数,half_num = max_page//2的关系,让导航条以当前页面居中显示.还加上了导航条上当前页面对应的链接被激活的状态.现在只需要添加上第一页和最后一页的功能就可以了.需要先在模板上增加两个固定的按钮,然后对其传入两个新的变量.这两个变量的固定值一个是1,一个是总分页数.
修改模板如下:
<div class="container">
<h1 class="text-center">书籍列表</h1>
<table class="table table-striped table-bordered tab">
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>书名</th>
</tr>
</thead>
<tbody>
{% for book in book_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="btn btn-group">
</div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="/books/?page={{ previous }}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="/books/?page={{ start }}" aria-label="Previous">
<span aria-hidden="true">首页</span>
</a>
</li>
{% for i in page %}
<li><a href="/books/?page={{ i }}"
class="btn btn-primary {% if i == current %}active{% endif %} }">{{ i }}</a></li>
{% endfor %}
<li>
<a href="/books/?page={{ end }}" aria-label="Next">
<span aria-hidden="true">尾页</span>
</a>
</li>
<li>
<a href="/books/?page={{ next }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
之前的函数逻辑有些混乱,需要重新整理一下,合并一些分支判断.
重新来想一下,在函数的初始部分,需要增加对用户传入参数错误或者越界的处理.然后需要拿到若干个变量供后边使用,核心的变量就是每页需要展示的数量,分成几页,最后一页展示多少数量,页码最多展示几个.
基于上边这些变量,通过每次页面传入的当前值,生成一个序列传递给模板的导航条部分即可.
重新整理的视图函数如下:
def book_list(request):
# 每页显示的数据数量
page_per_html = 7
all_book = models.Book.objects.all().order_by("id")
all_book_num = all_book.count()
# 每页显示的最多页码数量
max_page = 11
# 中心页码左右两边数量
half_num = max_page // 2
# 用divmod 方法计算总页码,以及最后一页显示的数据数量
page, last = divmod(all_book_num, page_per_html)
if last:
page += 1
# 如果总页码小于每页显示的页面数量,则就显示总页码的数量
if max_page >= page:
max_page = page
# 错误处理,如果用户传入非数字,0和负数,跳到第一页,如果传入大于最后页码的数字,跳到最后一页
try:
page_num = int(request.GET.get("page", 1))
if page_num > page:
page_num = page
if page_num <= 0:
page_num = 1
except Exception:
page_num = 1
# 用于判断具体页码的显示,小于或者大于一定边界后就不再随位置显示
if page_num - half_num < 1: page_li = [i + 1 for i in range(max_page)] elif page_num + half_num > page:
page_li = [i + 1 for i in range(page - max_page, page)]
else:
page_li = [
i +
1 for i in range(
page_num -
half_num -
1,
page_num +
half_num)]
# 确定上一页和下一页,第一页的上一页依然是第一页,最后一页的下一页依然是最后一页
previous = page_num - 1 if page_num - 1 >= 1 else 1
next = page_num + 1 if page_num + 1 <= page else page
# 如果不是最后一页,则展示每页数量,或者没有余数,正好每页可以放下,都展示正常数据
if page_num != page or last == 0:
print(page_num, page)
all_book = all_book[(page_num - 1) *
page_per_html:page_num * page_per_html]
return render(request,
"books.html",
{"book_list": all_book,
"page": page_li,
"previous": previous,
"next": next,
"current": page_num,
"start": 1,
"end": page})
# 当是最后一页而且有余数,对于该页只展示余数的部分
else:
all_book = all_book[(
page_num - 1) * page_per_html:(page_num - 1) * page_per_html + last + 1]
return render(request,
"books.html",
{"book_list": all_book,
"page": page_li,
"previous": previous,
"next": next,
"current": page_num,
"start": 1,
"end": page})
封装成可复用的代码块
编写完成以后,如果每次要分页,必须要把这段代码粘贴到视图函数里边,重复工作太高.
观察视图函数,可以发现,视图函数在启动的时候需要获得的变量是:每页显示数量,每页显示的页码数,要查询的数据总数,当前页码.剩下的内部变量都是通过这几个变量计算出来的.再观察视图函数的输出,对模板传递的值是:查询数据的切片结果集,导航条的数字列表,下一个页码,上一个页码,当前页码,首页页码,最后一页页码.
那么可以封装一个类,在其他的视图函数中调用.只要这个视图函数把每页显示的数量,每页显示的页面量,要查询那张表,以及通过GET方法获得当前页码当做变量传递进来,就可以通过类的属性提供上边的这些输出,然后模板内可以把导航条的部分固定下来.只需要根据得到的数据的具体字段进行展示就可以了.由于到哪个表去检索数据也需要传入,而传入对象不太好处理,这里改成数据的开始和结束索引,让视图函数自己去控制检索什么内容.
列一个表如下:
| 传入参数 |
传出结果 |
| 每页显示数量 |
切片开始索引 |
| 每页显示页码数 |
切片结束索引 |
| 数据总数 |
页码数字列表 |
| 当前页码 |
下一个页码 |
|
上一个页码 |
|
当前页码 |
|
首页页码 |
|
末页页码 |
再观察视图函数的结构,根据if page_num != page or last == 0:判断的结果只影响传给模板的结果集,其他的部分都是计算好的.按照该思路来组织类:
class PageDivider:
def __init__(
self,
current_page,
data_length,
data_per_page=10,
max_page=11):
# 在初始化函数中计算好后边要使用的变量,只有返回的开始和结束索引需要在函数中计算,逻辑与视图函数中一样
self.page_li = []
self.data_num = data_length
self.per_page = data_per_page
self.nav_length = max_page
self.half_num = self.nav_length // 2
self.page, self.last = divmod(self.data_num, self.per_page)
if self.last:
self.page += 1
try:
self.current = int(current_page)
if self.current > self.page:
self.current = self.page
if self.current <= 0: self.current = 1 except Exception: self.current = 1 if self.nav_length >= self.page:
self.nav_length = self.page
self.pre = self.current - 1 if self.current - 1 >= 1 else 1
self.nex = self.current + 1 if self.current + 1 <= self.page else self.page
# 返回最后一个页面的页码
@property
def last_page_num(self):
return self.page
# 返回第一个页面的页码,固定为1
@property
def first_page_num(self):
return 1
# 返回当前页面的页码
@property
def current_page(self):
return self.current
# 返回导航条所需要的数字列表
@property
def nav_list(self):
if self.current - self.half_num < 1:
self.page_li = [i + 1 for i in range(self.nav_length)]
elif self.current + self.half_num > self.page:
self.page_li = [i + 1 for i in range(self.page - self.nav_length, self.page)]
else:
self.page_li = [
i +
1 for i in range(
self.current -
self.half_num -
1,
self.current +
self.half_num)]
return self.page_li
# 返回上一个按钮对应的页码
@property
def previous(self):
return self.pre
# 返回下一个按钮对应的页码
@property
def next_num(self):
return self.nex
# 返回页面使用的数据切片的开始索引
@property
def start_index(self):
return (self.current - 1) * self.per_page
# 返回页面使用的数据切片的结束索引,根据情况来返回最后一页的内容
@property
def end_index(self):
if self.current != self.page or self.last == 0:
return self.current * self.per_page
else:
return (self.current - 1) * self.per_page + self.last + 1
这个类写在app下边自定义名称的py文件里,在使用的时候只需要导入即可.
完成了这个类之后,在视图函数中,只需要通过当前页面和需要查找的数据总量实例化一个分页器对象,后边的每页展示数据默认为10,页码默认显示11个页码,之后将分页器的各个属性传递给模板即可.
修改后的模板如下:
<div class="container">
{#标题部分#}
<h1 class="text-center">书籍列表</h1>
{#数据展示部分#}
<table class="table table-striped table-bordered tab">
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>书名</th>
</tr>
</thead>
<tbody>
{% for book in book_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{#分页条部分#}
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="{% if current == 1 %}disabled{% endif %}">
<a href="/books/?page={{ previous }}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="/books/?page={{ start }}" aria-label="Previous">
<span aria-hidden="true">首页</span>
</a>
</li>
{% for i in page %}
<li><a href="/books/?page={{ i }}"
class="btn btn-primary {% if i == current %}active{% endif %} }">{{ i }}</a></li>
{% endfor %}
<li>
<a href="/books/?page={{ end }}">
<span aria-hidden="true">尾页</span>
</a>
</li>
<li class="{% if current == end %}disabled{% endif %}">
<a href="/books/?page={{ next }}">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
模板的导航条内需要的参数对应分页器类的各个属性,传入的数据的切片也是配合导航条生成的,今后只需要修改数据展示部分.
修改后的视图函数如下:
# 从自己编写的文件中导入分页器类
from book_manage.pagedivide import PageDivider
def book_list2(request):
from book_manage.pagedivide import PageDivider
# data_per_page = 15
# max_page = 9
current_page = request.GET.get("page", 1)
all_book = models.Book.objects.all()
all_book_num = all_book.count()
page_divider = PageDivider(current_page, all_book_num)
return render(request,
"books.html",
{"book_list": all_book[page_divider.start_index:page_divider.end_index],
"page": page_divider.nav_list,
"previous": page_divider.previous,
"next": page_divider.next_num,
"current": page_divider.current_page,
"start": page_divider.first_page_num,
"end": page_divider.last_page_num})
今后在不同的视图函数内,均可以导入该分页器,会自动将查询结果和对应分页属性传入模板,只需要修改模板内数据展示的部分即可.
