Django框架实现分页显示内容的方法详解框架实现分页显示内容的方法详解
主要介绍了Django框架实现分页显示内容的方法,结合实例形式详细分析了Django框架引入bootstrap样式进行分
页显示相关步骤、实现方法与操作注意事项,需要的朋友可以参考下
本文实例讲述了Django框架实现分页显示内容的方法。分享给大家供大家参考,具体如下:
分页分页
1、作用、作用
数据加载优化
2、前端引入、前端引入bootstrap样式:样式:
{# 引入bootstrap样式的cdn资源 #}
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
引入分页器:
<div id="rootbox">
<h1>文章列表</h1>
<ul id="bloglist">
{# 遍历博文 #}
{% for blog in page.object_list %}
{# 显示博文标题 #}
<li>
<a href="{% url 'app:readblog' blog.id %}" rel="external nofollow" ><h3>{{ blog.title }}</h3></a>
</li>
{% endfor %}
</ul>
{#分页器:html内容拷贝于bootstrap网站-组件-分页#}
{# bootstrap是一整套成熟经典的页面组件框架 #}
<nav aria-label="Page navigation">
<ul class="pagination">
{# 上一页按钮 #}
{# 如果有上一页 #}
{% if page.has_previous %}
<li>
{# 点击超链接,对上一页的页面发起访问 #}
<a href="{% url 'app:blogs' page.previous_page_number %}" rel="external nofollow" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{# 如果没有上一页 #}
{% else %}
{# 当没有上一页时,阅读bootrap文档得知,对当前li使用disabled样式 #}
<li class="disabled">
{# href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ,处于禁用状态的按钮被点击时直接跳转本页 #}
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% endif %}
{# 页码按钮 #}
{# 遍历传入的页码范围 #}
{% for p in pagerange %}
{# 如果页码=当前页页码 #}
{% ifequal p currentpage %}
{# 被选中的页码具有高亮效果,阅读bootrap文档得知,对当前li使用active样式 #}
{# {% url 'app:blogs' p %} 点击页码,对第p页的路由发起访问 #}
<li class="active"><a href="{% url 'app:blogs' p %}" rel="external nofollow" rel="external nofollow" >{{ p }}</a></li>
{% else %}
{# 非当前页页码普通显示 #}
<li><a href="{% url 'app:blogs' p %}" rel="external nofollow" rel="external nofollow" >{{ p }}</a></li>
{% endifequal %}
{% endfor %}
{# 下一页按钮 #}
{% if page.has_next %}
<li>
{# 点击超链接,对下一页的页面发起访问 #}
<a href="{% url 'app:blogs' page.next_page_number %}" rel="external nofollow" aria-label="Next">
<span aria-hidden="true">»</span>
</a></li>
{% else %}
{# 当没有下一页时,阅读bootrap文档得知,对当前li使用disabled样式 #}
<li class="disabled">
评论0