如果數據太多單頁顯示過於繁雜，來使用分頁器來顯示

其他準備工作(如數據庫遷移)略

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/[email protected]/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文件中對應的變量也應該更換

Django組件之分頁器