分页器（分页器基本操作、点击按钮分页、美化分页器）
分页器基本操作
⽤户访问⼀个⽹页或者查看某些数据，如果数据量过⼤肯定需要按页查看，不可能⼀个页⾯显⽰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 = _queryset().order_by('id')
paginator = Paginator(book_list,10) #多少数据分⼀页
print('coumt:',unt) #数据总数
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(('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官⽹给出了分页器的模版，咱们可以直接拿过来⽤
⽹址 v3.bootcss/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={{ _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={{ _page_number }}
判断如果当前页⾯对上⼀页，或者下⼀页为最后⼀页，将li 标签设置 disabled 属性，变为不可点击
美化分页器
美化分页器
理想中对分页器是这样的，点击之后两边显⽰可点击的页码
⾸先咱们要对咱们的页数进⾏判断，超过多少页的时候可以进⾏左右两边划分，划分过后，要控制点击页码的两边的页码为正常数值，
如果两边的页码数量⼩于这个值，要对整体循环页码赋予新的值。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页器</title>
<link rel="stylesheet" href="cdn.jsdelivr/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={{ _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 dels import *
paginator import Paginator, EmptyPage, PageNotAnInteger
# Create your views here.
def index(request):
#分页器对使⽤
# book_list = Book.objects.all()
book_list = _queryset().order_by('id')
paginator = Paginator(book_list,10) #多少数据分⼀页
current_num = int(('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())
发布评论