Django-jQuery分页

最新推荐文章于 2022-04-05 14:48:20 发布

Pineapple丶

最新推荐文章于 2022-04-05 14:48:20 发布

阅读量413

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Django

本文链接：https://blog.csdn.net/weixin_44930101/article/details/93646627

Django 专栏收录该内容

10 篇文章

订阅专栏

该博客详细介绍了如何在Django后台和前台实现分页。首先，讲解了Django后台分页的实现，利用range函数创建int型list。接着，介绍了Django前台分页器的使用，包括判断是否存在上一页、获取下一页页码以及总页数。最后，探讨了如何在前台使用jQuery分页器来实现分页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 分页后台

# 1、导包
from django.core.paginator import Paginator


class UserView(View):
	def get(self, request):
		# 2、查询数据
		user_list = models.User.objects.filter()
		# 3、分页处理。 1：user_list:数据集 2:每页显示条数
		paginator = Paginator(user_list, 2)
		# 4、查询第一页的内容
		p = request.GET.get('p', 1)
		page = paginator.page(p) # 如果p不是整型，返回第一页的内容
		
		return render(request, 'user.html', {'page': page})

注意：range(start, end, step)，返回一个list对象，起始值为start，终止值为end，但不含终止值，步长为step。只能创建int型list

2. 分页前台(使用Django分页器)

	<style>
		/* 分页样式 */
		.pagination{height:32px;text-align:center;font-size:0;margin:30px auto;}
		.pagination a{display:inline-block;border:1px solid #d2d2d2;background-color:#f8f6f7;font-size:12px;padding:7px 10px;color:#666;margin:5px}
		.pagination .active{background-color:#fff;color:#43a200}
	</style>

page.has_previous:是否存在上一页
page.next_page_number：是否存在下一页
page.paginator.page_range：分页后的总页数。一共有多少页

{% for u in page %}
	{{ u.username }}
	<br>
{% endfor %}
<div class="pagenation">
	{% if page.has_previous %}
		<a href="{% url 'User:page' %}?p={{ page.previous_page_number }}"><上一页</a>
	{% endif %}
	{% for p in page.paginator.page_range %}
		<a href="{% url 'User:page' %}?p={{ p }}">{{ p }}</a>
	{% endfor %}
	{% if page.has_next %}
		<a href="{% url 'User:page' %}?p={{ page.next_page_number }}">下一页></a>
	{% endif %}
</div>

3. 分页前台（使用jQuery分页器）

{% for u in page %}
	{{ u.username }}
	<br>
{% endfor %}


<div class="pagination"></div>
<script>
	$(".pagination").pagination({
		currentPage: {{ current_page }},
		totalPage: {{ total_page }},
		callback: function(current) {
			window.location.href="{% url 'User:page2' %}?p="+current
		}
	});
</script>

在这里插入图片描述