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