基于 Python 的自定义分页组件
分页是网页中经常用到的地方，所以将分页功能分出来，作为一个组件可以方便地使用。
分页实际上就是不同的 url ，通过这些 url 获取不同的数据。
业务逻辑简介
- 说是组件，其实就是个分页类，能够在试图层对该类进行实例化再传到前端。
- 既然是类，初始化时需要的参数就比较重要。
- 首页、尾页功能。
- 上一页、下一页功能。
- 当前页高亮及当前页左右有一定数量的页码。
分页类实现
初始化
初始化传参说明：
data_num: 整个数据库的数据数量。
current_page: 当前页码。
url_prefix: url路径前缀。
params: 从前端传过来的键值对。
per_page: 每一页显示的数据数量。
max_show: 页码最多显示几个。
初始化逻辑
一些类的简单属性可以通过初始化传参直接赋值，而复杂的属性则需要根据不同情况做判断后再赋值。
self.data_num = data_num
self.per_page = per_page
self.max_show = max_show
self.url_prefix = url_prefix
# 传过来的参数
self.params = copy.deepcopy(params)
- 页码数需要自己算
# 把页码数算出来
self.page_num, more = divmod(data_num, per_page)
if more:
self.page_num += 1
- 对当前页码数做判断
try:
self.current_page = int(current_page)
except Exception as e:
self.current_page = 1
# 如果URL传过来的页码数是负数,显示第一页
if self.current_page <= 0:
self.current_page = 1
# 如果URL传过来的页码数超过最大页码数,显示最后一页
elif self.current_page > self.page_num:
self.current_page = self.page_num
- 当前页码数左右显示页码
# 页码数的一半
self.half_show = max_show // 2
# 页码最左边显示多少
if self.current_page - self.half_show <= 1:
self.page_start = 1
self.page_end = self.max_show
# 如果右边越界
elif self.current_page + self.half_show >= self.page_num:
self.page_end = self.page_num
self.page_start = self.page_num - self.max_show
else:
self.page_start = self.current_page - self.half_show
# 页码最右边显示
self.page_end = self.current_page + self.half_show
切数据的开始和结束
分页实际上就是在数据库中拿出一定数量的数据显示在前端，我们 用切片来实现取出的数据 ，所以分页类需要有切片的初始位置和结束位置。
我们将两个函数设为静态函数。
@property
def start(self):
# print("current_page", self.current_page)
# 数据从哪开始切
return (self.current_page - 1) * self.per_page
@property
def end(self):
# 数据切到哪
return self.current_page * self.per_page
生成页码
以 li 标签为容器，实现页码的前端渲染。在后端对 HTML 标签的进行属性赋值是常用方式。
对于字典，使用 urlencode 函数将其变成在 url 中使用的键值对形式。
加上字典的原因是：搜索或者筛选条件以 GET 请求发送至后端，此时取得的数据应该都是筛选后的，所以在页码中也需要加上此字典。
def page_html(self):
# 生成页码
l = []
# 加一个首页
l.append('<li><a href="{}?page=1">首页</a></li>'.format(self.url_prefix))
# 加一个上一页
if self.current_page == 1:
l.append('<li class="disabled"><a href="#"><<</a></li>')
else:
l.append('<li><a href="{}?page={}"><<</a></li>'.format(self.url_prefix, self.current_page-1))
# 页码
for i in range(self.page_start, self.page_end+1):
self.params["page"] = i
if i == self.current_page:
tmp = '<li class="active"><a href="{0}?page={1}">{1}</a></li>'.format(self.url_prefix, i)
else:
tmp = '<li><a href="{0}?{1}">{2}</a></li>'.format(self.url_prefix, self.params.urlencode(), i)
l.append(tmp)
# 加一个下一页
if self.current_page == self.page_num:
l.append('<li class="disabled"><a href="#">>></a></li>')
else:
l.append('<li><a href="{}?page={}">>></a></li>'.format(self.url_prefix, self.current_page + 1))
# 加一个尾页
l.append('<li><a href="{}?page={}">尾页</a></li>'.format(self.url_prefix, self.page_num))
return "".join(l)
视图函数的使用
在视图函数中，需要从 GET 中获取分页类初始化所用的参数并实例化一个类。
将分页实例对象和通过分页切片获取的数据传到前端。
def index(request):
current_page = request.GET.get("page", 1)
all_count = Book.objects.all().count()
base_url = request.path
pagination = Pagination(all_count, current_page, base_url, request.GET, per_page=1, max_show=3)
book_list = Book.objects.all()[pagination.start : pagination.end]
return render(request, "index.html", locals())
前端的使用
前端的使用更为简单，只需要在放置页码的位置引入分页实例对象的页码函数即可。
<body>
<ul>
{% for book in book_list %}
<li>{{ book.title }}</li>
{% endfor %}
</ul>
<nav>
<ul class="pagination">
{{ pagination.page_html | safe }}
</ul>
</nav>
</body>
GitHub 地址：https://github.com/protea-ban/oldboy/tree/master/s9day90/page_demo
