基于 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