分页器基本操作
用户访问一个网页或者查看某些数据，如果数据量过大肯定需要按页查看，不可能一个页面显示N条数据内容这里就用到了分页器
- 首先往数据库里插入数据，这里咱们进行脚本批量插入
# #脚本批量插入数据book_list = []for i in range(200):#创建200条数据book = Book(title='book_%s'%i,price=i*i)book_list.append(book)#批量插入语法Book.objects.bulk_create(book_list)
这样一条insert语句包含多条数据，一次性插入
- 分页器的基本语法及使用
def index(request):#分页器对使用 #book_list = Book.objects.all()
#这里建议使用该种方法获取Book对象的列表，否则会出现 ‘UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list:’
的报警信息。
book_list = Book.objects.get_queryset().order_by('id')
paginator = Paginator(book_list,10) #多少数据分一页print('coumt:',paginator.count) #数据总数print('num_pages:',paginator.num_pages) #总页数print('page_range:',paginator.page_range) #页码列表#获取某页的方式#方式一page1=paginator.page(1) #获取第一页的page对象#方式二for i in page1: #遍历第一页的所有数据print(i)#根据用户选择来进行页面显示，获取用户的页数try: #这里捕获异常到目的就是为了用户选择页码以外到值不会报错current_page=int(request.GET.get('page',1)) #这里要记得传一个默认值否则会报错，因为views 没有获取到page这个参数current_page=paginator.page(current_page)except EmptyPage as e:current_page =paginator.page(1)return render(request,'index.html',locals())
#输出内容
coumt: 200 num_pages: 20 page_range: range(1, 21) Book object (1) Book object (2) Book object (3) Book object (4) Book object (5) Book object (6) Book object (7) Book object (8) Book object (9) Book object (10)
- 前端页面的显示，传递分页过后的对象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>分页器</title> </head> <body> <ul> {#这里传递分页过后到内容#}{% for book in current_page %}<li>{{ book.title }} : {{ book.price }}</li>{% endfor %}</ul></body> </html>
- 效果图
因为默认访问显示的为第一页内容，如是果想访问其他页需要 给后端传递 page 参数
更换页码 URL
点击按钮分页
这里就用到bootstrap了，首先引入cdn，加在bootstrap，bookstarp官网给出了分页器的模版，咱们可以直接拿过来用
网址 https://v3.bootcss.com/components/#pagination
<nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul> </nav>
这里他是写好的多少个li标签也就是多少页，咱们要根据后端的 paginator_num_pages 进行range 循环进行动态展示页码，并根据点击页码进行更改 ?page 的值，并对点击标签加深，
这里判断对是当前点击页面与后端获取页面是否相等，如果相等给予li 标签 calss =active 属性
{% for item in paginator.page_range%}{% if current_num == item %}<li class="active"><a href="?page={{ item }}">{{ item }}</a></li>{% else %}<li><a href="?page={{ item }}">{{ item }}</a></li>{% endif %} 显示效果
下面咱们配置上一页和下一页功能
{% if current_page.has_previous %}<li><a href="?page={{ current_page.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>{% else %}<li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>{% if current_page.has_next %}<li><a href="?page={{ current_page.next_page_number }}" aria-label="Next"><spanaria-hidden="true">下一页</span></a></li>{% else %}<li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">下一页</span></a></li>{% endif %} 这里如果不对当前页面进行判断是否还有上一页或者下一页
current_page.has_previous
current_page.has_next
就会出现上一页或者下一页 不存在数据的序号，如果用户点击了下一页或者上一页，则给当前页面发送参数，分别意思为当前页面对上一页和当前页面对下一页
href="?page={{ current_page.previous_page_number }} href="?page={{ current_page.next_page_number }}
判断如果当前页面对上一页，或者下一页为最后一页，将li 标签设置 disabled 属性，变为不可点击
美化分页器
美化分页器
理想中对分页器是这样的，点击之后两边显示可点击的页码
首先咱们要对咱们的页数进行判断，超过多少页的时候可以进行左右两边划分，划分过后，要控制点击页码的两边的页码为正常数值，
如果两边的页码数量小于这个值，要对整体循环页码赋予新的值。
html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>分页器</title><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"> </head> <body> <ul>{#这里传递分页过后到内容#}{% for book in current_page %}<li>{{ book.title }} : {{ book.price }}</li>{% endfor %}</ul> {#分页器#} <nav aria-label="Page navigation"><ul class="pagination">{% if current_page.has_previous %}<li><a href="?page={{ current_page.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>{% else %}<li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>{% endif %}#这里对 记住对page_range 进行循环，不要对原始对range 进行循环{% for item in page_range %}{% if current_num == item %}<li class="active"><a href="?page={{ item }}">{{ item }}</a></li>{% else %}<li><a href="?page={{ item }}">{{ item }}</a></li>{% endif %}{% endfor %}{% if current_page.has_next %}<li><a href="?page={{ current_page.next_page_number }}" aria-label="Next"><spanaria-hidden="true">下一页</span></a></li>{% else %}<li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">下一页</span></a></li>{% endif %}</ul> </nav> </body> </html>
views
from django.shortcuts import render from app01.models import * from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger# Create your views here. def index(request): #分页器对使用# book_list = Book.objects.all() book_list = Book.objects.get_queryset().order_by('id')paginator = Paginator(book_list,10) #多少数据分一页 current_num = int(request.GET.get('page', 1))paginator_num_pages =paginator.num_pagesprint(paginator_num_pages)#进行判断超过多少值进行左右循环，11这里是左5右5if paginator.num_pages>11:
#进行判断如果页码数上一页-5的时候小于1，就对循环页面重新赋值，上一页同理if current_num -5<1:page_range=range(1,14)elif current_num +5>paginator_num_pages:page_range=range(paginator_num_pages-11,paginator_num_pages+1)else:page_range=range(current_num-5,current_num+6) else:page_range=paginator.page_range#根据用户选择来进行页面显示，获取用户的页数try: #这里捕获异常到目的就是为了用户选择页码以外到值不会报错#这里要记得传一个默认值否则会报错，因为views 没有获取到page这个参数current_page=paginator.page(current_num)except EmptyPage as e:current_page =paginator.page(1)return render(request,'index.html',locals())
