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">«</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">»</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">«</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">»</span> 16 </a> 17 </li> 18 </ul> 19 </nav> 20 </div> 21 </div>