【补充】分页器推导
【11.0补充】分页器推导
【1.0】基础版
- 后端
def ab_many(request):
# 分页操作 推导
# (1) 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
# (2) 分页操作
# 想访问的页数
current_page = request.GET.get('page', 1) # 如果获取不到当前页码就展示第一页
# 异常捕获
try:
current_page = int(current_page)
except Exception:
current_page = 1
# 每页展示多少条
per_page_num = 10
# 起始位置
start_page = (current_page - 1) * per_page_num
# 终止位置
end_page = current_page * per_page_num
# 切片
book_queryset = models.Book.objects.all()[start_page:end_page]
'''
start_page = (current_page-1) * per_page_num
end_page = current_page * per_page_num
'''
return render(request, 'ab_many.html', locals())
- 前端
{% for book_obj in book_queryset %}
<p>{{ book_obj.title }}</p>
{% endfor %}
- 方式
通过在 url 后面携带参数,完成分页操作
http://127.0.0.1:8000/ab_many/?page=3
但是这种当时方式,没有对前端页面进行优化,仅仅只是后端部分完成了分页
【2.0】分页器组件
- 参考bootstrap官方文档,拷贝分页器代码进行优化
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
- 优化后代码
{% for book_obj in book_queryset %}
<p>{{ book_obj.title }}</p>
{% endfor %}
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="?page=1">1</a></li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
- 效果
- 通过点击底部的页码也已进行指定的分页
缺点:数据页数只能指定,无法展示全部数据
【3.0】优化分页
-
总数据 100 条
- 每一页 10 条
- 需要 10 页
- 每一页 10 条
-
总数据 99 条
- 每一页 10 条
- 需要 10 页
- 每一页 10 条
-
总数据 101 条
- 每一页 10 条
- 需要 11 页
- 每一页 10 条
如何动态的计算出需要多少页?
- 后端
def ab_many(request):
# 分页操作 推导
# (1) 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
# (2) 分页操作
# 书籍对象
book_query = models.Book.objects.all()
# 想访问的页数
current_page = request.GET.get('page', 1) # 如果获取不到当前页码就展示第一页
# 异常捕获
try:
current_page = int(current_page)
except Exception:
current_page = 1
# 每页展示多少条
per_page_num = 10
# 动态计算出需要的总页数
all_count = book_query.count()
# 计算总数
page_count, more = divmod(all_count, per_page_num)
if more:
page_count += 1
page_html = ''
# 前端动态页面展示 - 后端写好页面传给前端
for count in range(1, page_count + 1):
page_html += f'<li><a href="?page={count}">{count}</a></li>'
# 起始位置
start_page = (current_page - 1) * per_page_num
# 终止位置
end_page = current_page * per_page_num
# 切片
book_queryset = book_query[start_page:end_page]
'''
start_page = (current_page-1) * per_page_num
end_page = current_page * per_page_num
'''
return render(request, 'ab_many.html', locals())
- 前端
{% for book_obj in book_queryset %}
<p>{{ book_obj.title }}</p>
{% endfor %}
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{# 前段转义 - 将后端的html页面进行转义,转为前端页码/也可以后端做这件事 #}
{{ page_html|safe }}
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
完成了分页操作的雏形,但是问题是前端页面展示的页码过于繁多
【4.0】迭代 - 美化分页器
- 在制作页码个数的时候,一般情况下是奇数个
- 符合中国人的审美
def ab_many(request):
# 分页操作 推导
# (1) 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
# (2) 分页操作
# 书籍对象
book_query = models.Book.objects.all()
# 想访问的页数
current_page = request.GET.get('page', 1) # 如果获取不到当前页码就展示第一页
# 异常捕获
try:
current_page = int(current_page)
except Exception:
current_page = 1
# 每页展示多少条
per_page_num = 10
# 动态计算出需要的总页数
all_count = book_query.count()
# 计算总数
page_count, more = divmod(all_count, per_page_num)
if more:
page_count += 1
# 纠正左侧负数页的问题
left_page_count = current_page
if current_page < 6:
current_page = 6
page_html = ''
# 前端动态页面展示 - 后端写好页面传给前端
for count in range(current_page - 5, current_page + 6):
if left_page_count == count:
# 第一页高亮显示
page_html += f'<li class="active"><a href="?page={count}" >{count}</a></li>'
else:
page_html += f'<li><a href="?page={count}" >{count}</a></li>'
# 起始位置
start_page = (current_page - 1) * per_page_num
# 终止位置
end_page = current_page * per_page_num
# 切片
book_queryset = book_query[start_page:end_page]
'''
start_page = (current_page-1) * per_page_num
end_page = current_page * per_page_num
'''
return render(request, 'ab_many.html', locals())
- 前端
{% for book_obj in book_queryset %}
<p>{{ book_obj.title }}</p>
{% endfor %}
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{# 前段转义 - 将后端的html页面进行转义,转为前端页码/也可以后端做这件事 #}
{{ page_html|safe }}
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
本文来自博客园,作者:Chimengmeng,转载请注明原文链接:https://www.cnblogs.com/dream-ze/p/17559628.html