【3.6】实现分页功能

 

 

 1.使用Bootstrap实现分页按钮

　　

 1 <div class="body-footer">
 2                 <div class="col-md-4 col-md-offset-3">
 3                     <nav aria-label="Page navigation">
 4                       <ul class="pagination">
 5                         <li>
 6                           <a href="#" aria-label="Previous">
 7                             <span aria-hidden="true">&laquo;</span>
 8                           </a>
 9                         </li>
10                         <li><a href="#">1</a></li>
11                         <li><a href="#">2</a></li>
12                         <li><a href="#">3</a></li>
13                         <li><a href="#">4</a></li>
14                         <li><a href="#">5</a></li>
15                         <li>
16                           <a href="#" aria-label="Next">
17                             <span aria-hidden="true">&raquo;</span>
18                           </a>
19                         </li>
20                       </ul>
21                     </nav>
22                 </div>
23             </div>

 

2.实现分页URL

　　

 

 

3.使用django分页组件实现分页功能

　　导入模块

1 from django.core.paginator import Paginator

　　分页代码

 1 # 实例化，每一页有3篇文章，第一个参数是需要分页的list，第二个参数是每一页的数量
 2     paginator = Paginator(all_article, 5)
 3     # 获取分页页数
 4     page_num = paginator.num_pages
 5     print('page num: ', page_num)
 6     # 获取每一页的文章列表
 7     page_article_list = paginator.page(page)
 8     if page_article_list.has_next():
 9         next_page = page + 1
10     else:
11         next_page = page
12     if page_article_list.has_previous():
13         previous_page = page - 1
14     else:
15         previous_page = page

　　修改视图函数

　

 1 def get_index_page(request):
 2     page = request.GET.get('page')
 3     if page:
 4         page = int(page)
 5     else:
 6         page = 1
 7     print('page param: ', page)
 8     all_article = Article.objects.all()
 9 
10     # 实例化，每一页有3篇文章，第一个参数是需要分页的list，第二个参数是每一页的数量
11     paginator = Paginator(all_article, 5)
12     # 获取分页页数
13     page_num = paginator.num_pages
14     print('page num: ', page_num)
15     # 获取每一页的文章列表
16     page_article_list = paginator.page(page)
17     if page_article_list.has_next():
18         next_page = page + 1
19     else:
20         next_page = page
21     if page_article_list.has_previous():
22         previous_page = page - 1
23     else:
24         previous_page = page
25 
26     # render 把模板系统和数据进行渲染然后返回 render(request, 路径, 传递的值)
27     return render(request, 'blog/index.html',
28                   {
29                       'article_list': page_article_list,
30                       'page_num': range(1, page_num + 1),
31                       'curr_page': page,
32                       'next_page': next_page,
33                       'previous_page': previous_page
34                   })

　　修改分页HTML

 1 <div class="body-footer">
 2                 <div class="col-md-4 col-md-offset-3">
 3                     <nav aria-label="Page navigation">
 4                       <ul class="pagination">
 5                         <li>
 6                           <a href="/blog/index?page={{ previous_page }}" aria-label="Previous">
 7                             <span aria-hidden="true">&laquo;</span>
 8                           </a>
 9                         </li>
10                         {% for num in page_num %}
11                         <li><a href="/blog/index?page={{ num }}">{{ num }}</a></li>
12                         {% endfor %}
13                         <li>
14                           <a href="/blog/index?page={{ next_page }}" aria-label="Next">
15                             <span aria-hidden="true">&raquo;</span>
16                           </a>
17                         </li>
18                       </ul>
19                     </nav>
20                 </div>
21             </div>

 

posted @ 2019-09-03 11:47  _simpleSmile  阅读(334)  评论(0)  编辑  收藏  举报