django的分页组件
Paginator对象: paginator = Paginator(user_list, 10)
# per_page: 每页显示条目数量
# count: 数据总个数
# num_pages:总页数
# page_range:总页数的索引范围,如: (1,10),(1,200)
# page: page对象
page对象:page=paginator.page(1)
# has_next 是否有下一页
# next_page_number 下一页页码
# has_previous 是否有上一页
# previous_page_number 上一页页码
# object_list 分页之后的数据列表
# number 当前页
# paginator paginator对象
批量数据入库
Booklist = []
for i in range(100):
Booklist.append(Book(title="book" + str(i), price=30 + i * i))#Book是models中的类,有title和price字段
Book.objects.bulk_create(Booklist)#按照booklist中的对象进行批量数据入库
for book in Booklist:
print(book.title)
分页器前端代码(注意超链接中的/book/要和你的url一致)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/bs-3.3.7/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<ul>
{% for book in page %}
<li>{{ book.title }} -----{{ book.price }}</li>
{% endfor %}
</ul>
<nav aria-label="Page navigation">
<ul class="pagination">
#首页
<li>
<a href="/book/?page=1" aria-label="first">
<span aria-hidden="true">首页</span>
</a>
</li>
#上一页
{% if page.has_previous %}
<li>
<a href="/book/?page={{ page.previous_page_number }}" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</li>
{% else %}
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</li>
{% endif %}
#中间显示的一排按钮,其中page_range是总页数的索引范围
{% for foo in page_range %}
{% if current_page == foo %}
<li class="active"><a href="/book/?page={{ foo }}">{{ foo }}</a></li>
{% else %}
<li><a href="/book/?page={{ foo }}">{{ foo }}</a></li>
{% endif %}
{% endfor %}
<li><a href="javascript:void(0)">...</a></li>
{% if page.has_next %}
<li>
<a href="/book/?page={{ page.next_page_number }}" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</li>
{% else %}
<li class="disabled">
<a href="#" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</li>
{% endif %}
#尾页按钮
<li>
<a href="/book/?page={{ paginator.num_pages }}" aria-label="first">
<span aria-hidden="true">尾页</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
分页器后端代码
def book(request):
book_list = Book.objects.all()#需要分页的数据,从数据库里取得的对象queryset列表
# 生成paginator对象,传入书籍列表,每页10条数据
paginator = Paginator(book_list, 10)#创建分页器对象
current_page = int(request.GET.get('page', 1)) # 获取url参数中传来的当前页码
page_range = []
# 左5 右5
# 获取页面传来的页码的page对象
try:
page = paginator.page(current_page)
except Exception as e:
current_page = 1
page = paginator.page(1)
if paginator.num_pages > 11:
if current_page + 5 > paginator.num_pages:
page_range = range(paginator.num_pages - 10, paginator.num_pages + 1)
elif current_page - 5 < 1:
page_range = range(1, 12)
else:
page_range = range(current_page - 5, current_page + 6)
else:
page_range = paginator.page_range
return render(request, 'pages.html', locals())
分页后端需要向前端传递分页范围page_range,分页对象,和当前页,后端主要做的事情就是确定分页范围page_range,前端就是拿到前面说的数据,并生成分页布局,当前代码运行结果如图
想要在哪个页码后面加上'...'只需在前端代码的对应位置中填上这么一句
<li><a href="javascript:void(0)">...</a></li>
根据需求可以添加首页和尾页按钮等,只需对前端代码的相应部分删除就可以造成有无该功能