Django组件之分页器

如果数据太多单页显示过于繁杂，来使用分页器来显示

其他准备工作(如数据库迁移)略

models.py

  1: class Book(models.Model):
  2:     title = models.CharField(max_length=32)
  3:     price = models.DecimalField(decimal_places=2, max_digits=8)

views.py

  1: from app01.models import *
  2: from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
  3: 
  4: def index(request):
  5: 	# 批量导入大量数据到book表
  6: 	Booklist = []
  7:     for i in range(100):
  8:     	book = Book(title="book_%s" % i, price=i*i)
  9:         book_list.append(book)
 10:     # 所有数据挂在Booklist中一次性导入
 11:     Book.objects.bulk_create(book_list)
 12: 
 13:     # 分页器的使用
 14:     book_list=Book.objects.all()
 15:     # 总分页器对象,第二个参数是每页显示数量
 16:     paginator = Paginator(book_list, 10)
 17:     # 数据总数
 18:     print("count:",paginator.count)
 19:     # 总页数
 20: 	print("num_pages：",paginator.num_pages)
 21: 	# 页码的列表
 22: 	print("page_range：",paginator.page_range) 
 23: 	# 第1页的page对象
 24: 	page1=paginator.page(1) 
 25: 	# 遍历第1页的所有数据对象
 26: 	for i in page1: 
 27: 		print(i)
 28: 	print(page1.object_list) #第1页的所有数据
 29: 
 30: 	# 当前的页面,第二个参数是页数默认值
 31: 	try:
 32: 		current_page_num = int(request.GET.get("page", 1))
 33: 		current_page = paginator.page(current_page_num)
 34: 		for i in current_page:
 35: 			print(i)
 36: 	except EmptyPage as e：
 37: 		current_page = paginator.page(1)
 38: 
 39: 	return render(request, "index.html", locals())
 40: 

index.html

  1: <ul>
  2: 	{% for book in current_page %}
  3: 	<li>{{book.title}}:{{book.price}}</li>
  4: 	{% endfor %}
  5: </ul>

这样简单的分页就实现了,下面通过bootstrap来玩底面的分页样式。

cdn链接
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

模板代码

  1: <nav aria-label="Page navigation">
  2:   <ul class="pagination">
  3:   	{# 为了避免页面溢出,需要用到页面对象的四个api #}
  4:     {% if current_page.has_previous %}
  5:       {# 上一页,点一下页码减一 #}
  6:       <li><a href="?page={{ current_page_num.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
  7:     {% else %}
  8:       <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
  9:     {% endif %}
 10:    	
 11:        
 12:     {# 自动遍历页码 #}
 13:     {% for item in paginator.page_range %}
 14:     {# 当前页码高亮 #}
 15:     {% if current_page_num == item %}
 16: 	    <li class="active"><a href="?page={{item}}">{{ item }}{{}}</a></li>
 17:     {% else %}
 18:     	<li><a href="?page={{item}}">{{ item }}{{}}</a></li>
 19:     {% endfor %}
 20: 
 21:     {% if current_page.has_next %}
 22:       {# 上一页,点一下页码加一 #}
 23:       <li><a href="?page={{ current_page_num.next_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
 24:     {% else %}
 25:       <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
 26:     {% endif %}
 27:   </ul>
 28: </nav>

扩展

当页面特别多,不用显示所有的页码.

views

  1: # 指定显示页面的固定数量为10个
  2: if pagintor.num_pages > 11:
  3: 	
  4: 	# 控制左边显示最低为1
  5: 	if current_page_num - 5 < 1:
  6: 		page_range = range(1, 11)
  7: 	# 控制右边显示最高为最大页码数
  8: 	elif current_page_num + 5 < paginator.num_pages:
  9: 		page_range = range(paginator.num_pages - 11 , paginator.num_pages + 1)
 10: 	# 正常显示
 11: 	else:
 12: 		page_range = range(current_page_num-5, current_page_num+6)
 13: else:
 14: 	page_rane = paginator.page_range
 15: 	# html文件中对应的变量也应该更换