由于这样子的按钮不美观,也太别扭了,解决:

第一步:
把html模板改成如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h4>分页器</h4>
<ul>
{% for book in page %}
<li>{{ book.title }} -----{{ book.price }}</li>
{% endfor %}
</ul>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="/books?page=1" aria-label="Next">
<span aria-hidden="true">第一页</span>
</a>
</li>
{% for foo in page_range %}
<li><a href="">{{ foo }}</a></li>
{% endfor %}
<li>
<a href="/books?page={{ paginator.num_pages }}" aria-label="Next">
<span aria-hidden="true">最后一页</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
后端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h4>分页器</h4>
<ul>
{% for book in page %}
<li>{{ book.title }} -----{{ book.price }}</li>
{% endfor %}
</ul>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="/books?page=1" aria-label="Next">
<span aria-hidden="true">第一页</span>
</a>
</li>
{% for foo in page_range %}
<li><a href="/books/?page={{ foo }}">{{ foo }}</a></li>
{% endfor %}
<li>
<a href="/books?page={{ paginator.num_pages }}" aria-label="Next">
<span aria-hidden="true">最后一页</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
结果:

第二步:
加深按钮颜色:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h4>分页器</h4>
<ul>
{% for book in page %}
<li>{{ book.title }} -----{{ book.price }}</li>
{% endfor %}
</ul>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="/books?page=1" aria-label="Next">
<span aria-hidden="true">第一页</span>
</a>
</li>
{% for foo in page_range %}
{% if i == visit_page_num %}
<li class="active"><a href="/books/?page={{ foo }}">{{ foo }}</a></li>
{% else %}
<li><a href="/books/?page={{ foo }}">{{ foo }}</a></li>
{% endif %}
{% endfor %}
<li>
<a href="/books?page={{ paginator.num_pages }}" aria-label="Next">
<span aria-hidden="true">最后一页</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
第三步:
page=0的时候还是会有错误,此时我们应该要添加判断。

在views.py文件中更改:
from django.shortcuts import render, HttpResponse
from .models import Book
def create(request):
Booklist = []
for i in range(101):
Booklist.append(Book(title="book" + str(i), price=i * 2))
Book.objects.bulk_create(Booklist)
return HttpResponse("插入成功")
from django.core.paginator import Paginator
def index(request):
book_list = Book.objects.all()
#(1)分页对象
paginator = Paginator(book_list, 5) #每页5条数据
#分页信息
print(paginator.count) #总数量 1000
print(paginator.num_pages) #分页的数量 13页
print(paginator.page_range) #分页列表range(1,14)
try:
#(2)获取某页对象
visit_page_num = int(request.GET.get('page', 1))
page = paginator.page(visit_page_num) #page(哪一页的数据)
print(visit_page_num)
#获取该页的所有数据
#方式一:
# print(page.object_list)
#
# #方式二:
# for book in page:
# print(book)
#某页对象其他属性
# print(page.next_page_number()) #下一页
# print(page.previous_page_number()) #上一页
# print(page.has_next()) #是否有下一页 True
# print(page.has_previous()) #是否有上一页 True
# page_book_list = page.object_list
if visit_page_num == 1:
page_range = range(1,4)
elif visit_page_num == paginator.num_pages:
page_range = range(paginator.num_pages-2, paginator.num_pages + 1)
else:
page_range = [visit_page_num-1,visit_page_num,visit_page_num+1]
return render(request, 'index2.html', {"page": page, "paginator": paginator, "visit_page_num": visit_page_num,"page_range": page_range})
except Exception as e:
page = paginator.page(1)
visit_page_num = int(request.GET.get('page', 1))
page_range = [visit_page_num - 1, visit_page_num, visit_page_num + 1]
return render(request, 'index2.html', {"page": page, "paginator":paginator,"visit_page_num":visit_page_num,"page_range": page_range})
# return render(request,'index.html',{"page":page,"paginator":paginator,"visit_page_num":visit_page_num})

1126

被折叠的 条评论
为什么被折叠?



