分页器(分页器基本操作、点击按钮分页、美化分页器)
分页器基本操作
用户访问一个网页或者查看某些数据，如果数据量过大肯定需要按页查看，不可能一个页面显示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"><span
aria-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"><span aria-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_pages print(paginator_num_pages) #进行判断超过多少值进行左右循环，11这里是左5右5 if 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())
