分页组件
分页组件 |
一、概述
在同一页面中要显示所有是要耗费较长时间的,所以分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应该在数据库表中的起始位置。
二、Django内置分页
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
from django.shortcuts import render,HttpResponse from django.core.paginator import EmptyPage,PageNotAnInteger,Paginator # Create your views here. USER_LIST=[] for i in range(1,999): temp = {'name':'root'+str(i),'age':1} USER_LIST.append(temp) def index1(request): current_page = request.GET.get('p') paginator = Paginator(USER_LIST,10) # per_page: 每页显示条目数量 # count: 数据总个数 # num_pages:总页数 # page_range:总页数的索引范围,如: (1,10),(1,200) # page: page对象 try: posts = paginator.page(current_page) # has_next 是否有下一页 # next_page_number 下一页页码 # has_previous 是否有上一页 # previous_page_number 上一页页码 # object_list 分页之后的数据列表 # number 当前页 # paginator paginator对象 except PageNotAnInteger: posts = paginator.page(1) except EmptyPage: posts = paginator.page(paginator.num_pages) return render(request,'index1.html',{'posts':posts})
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> {% for row in posts.object_list %} <li>{{ row.name }}-{{ row.age }}</li> {% endfor %} </ul> {% if posts.has_previous %} <a href="/index1?p={{ posts.previous_page_number }}">上一页</a> {% endif %} {% if posts.has_next %} <a href="/index1?p={{ posts.next_page_number }}">下一页</a> {% endif %} <span>{{ posts.number }}/{{ posts.paginator.num_pages }}</span> </body> </html>
三、扩展Django的内置分页
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
from django.shortcuts import render,HttpResponse from django.core.paginator import EmptyPage,PageNotAnInteger,Paginator # Create your views here. USER_LIST=[] for i in range(1,999): temp = {'name':'root'+str(i),'age':1} USER_LIST.append(temp) class CustomPaginator(Paginator): def __init__(self,current_page,pcr_pager_num,*args,**kwargs): #当前页 self.current_page = int(current_page) #最多显示的页面数量 11 self.pcr_pager_num = int(pcr_pager_num) super(CustomPaginator, self).__init__(*args,**kwargs) def pager_num_range(self): if self.num_pages < self.pcr_pager_num: return range(1,self.num_pages+1) #总页数特别多 part = int(self.pcr_pager_num/2) if self.current_page <= part: return range(1,self.pcr_pager_num+1) if (self.current_page+part) > self.num_pages: return range(self.num_pages-self.pcr_pager_num+1,self.num_pages+1) return range(self.current_page-part,self.current_page+part+1) def index1(request): current_page = request.GET.get('p') paginator = CustomPaginator(current_page,11,USER_LIST,10) # per_page: 每页显示条目数量 # count: 数据总个数 # num_pages:总页数 # page_range:总页数的索引范围,如: (1,10),(1,200) # page: page对象 try: posts = paginator.page(current_page) # has_next 是否有下一页 # next_page_number 下一页页码 # has_previous 是否有上一页 # previous_page_number 上一页页码 # object_list 分页之后的数据列表 # number 当前页 # paginator paginator对象 except PageNotAnInteger: posts = paginator.page(1) except EmptyPage: posts = paginator.page(paginator.num_pages) return render(request,'index1.html',{'posts':posts})
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> {% for row in posts.object_list %} <li>{{ row.name }}-{{ row.age }}</li> {% endfor %} </ul> {% if posts.has_previous %} <a href="/index1?p={{ posts.previous_page_number }}">上一页</a> {% endif %} {% for i in posts.paginator.pager_num_range %} {% if i == posts.number %} <a style="font-size: 20px" href="/index1?p={{ i }}">{{ i }}</a> {% else %} <a href="/index1?p={{ i }}">{{ i }}</a> {% endif %} {% endfor %} {% if posts.has_next %} <a href="/index1?p={{ posts.next_page_number }}">下一页</a> {% endif %} <span>{{ posts.number }}/{{ posts.paginator.num_pages }}</span> </body> </html>
四、自定义分页
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
class Pagination(object): def __init__(self,totalCount,currentPage,perPageItemNum=20,maxPageNum=7): self.total_count=totalCount #数据总个数 try: v = int(currentPage) #当前页 if v <= 0: v=1 self.current_page = v except Exception as e: self.current_page = 1 self.per_page_item_num=perPageItemNum #每页显示的行数 self.max_page_num=maxPageNum #最大显示页码 def start(self): return (self.current_page-1)*self.per_page_item_num def end(self): return self.current_page*self.per_page_item_num @property #直接执行self.num_pages即可,不用加括号 def num_pages(self): #总页数 a,b = divmod(self.total_count,self.per_page_item_num) if b==0: return a return a+1 def pager_num_range(self): if self.num_pages < self.max_page_num: return range(1,self.num_pages+1) #总页数特别多 part = int(self.max_page_num/2) if self.current_page <= part: return range(1,self.max_page_num+1) if (self.current_page+part) > self.num_pages: return range(self.num_pages-self.max_page_num+1,self.num_pages+1) return range(self.current_page-part,self.current_page+part+1) def page_str(self): page_list = [] first="<li><a href='/index2?p=1'>首页</a></li>" page_list.append(first) if self.current_page == 1: prev = "<li><a href='#'>上一页</a></li>" else: prev = "<li><a href='/index2?p=%s'>上一页</a></li>"%(self.current_page-1) page_list.append(prev) for i in self.pager_num_range(): if i == self.current_page: temp="<li class='active'><a href='/index2?p=%s'>%s</a></li>"%(i,i) else: temp="<li><a href='/index2?p=%s'>%s</a></li>"%(i,i) page_list.append(temp) if self.current_page == self.num_pages: next = "<li><a href='#'>下一页</a></li>" else: next = "<li><a href='/index2?p=%s'>下一页</a></li>"%(self.current_page+1) page_list.append(next) last="<li><a href='/index2?p=%s'>尾页</a></li>"%(self.num_pages) page_list.append(last) return ''.join(page_list)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
def index2(request): from app01.pager import Pagination current_page = request.GET.get('p') page_obj = Pagination(999,current_page) data_list = USER_LIST[page_obj.start():page_obj.end()] return render(request,'index2.html',{'data':data_list,'page_obj':page_obj})
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> </head> <body> <ul> {% for row in data %} <li>{{ row.name }}-{{ row.age }}</li> {% endfor %} </ul> {# {% for i in page_obj.pager_num_range %}#} {##} {# <a href="/index2?p={{ i }}">{{ i }}</a>#} {# {% endfor %}#} {# {{ page_obj.page_str|safe }}#} <ul class="pagination pagination-sm"> {{ page_obj.page_str|safe }} </ul> </body> </html>
上面index2.html中引用了基于BootStrap和FontAwesome制作页面,从网上下载导入到static文件夹下即可,使用教程网页上有。