Python Web开发:Django分页显示
来自CloudWiki
背景
如果类目多了,需要设置分类效果。
Django提供了一个分页类Paginator来帮助管理分页数据。
它可以接收列表、元组或其他可迭代的对象。
实训步骤
productsApp的views.py文件:
导入分页模块
productsApp的views.py文件:
from django.core.paginator import Paginator
添加分页代码
productsApp的views.py文件:
p = Paginator(productList, 2) if p.num_pages <= 1: pageData = '' else: page = int(request.GET.get('page', 1)) productList = p.page(page) left = [] right = [] left_has_more = False right_has_more = False first = False last = False total_pages = p.num_pages page_range = p.page_range if page == 1: right = page_range[page:page + 2] print(total_pages) if right[-1] < total_pages - 1: right_has_more = True if right[-1] < total_pages: last = True elif page == total_pages: left = page_range[(page - 3) if (page - 3) > 0 else 0:page - 1] if left[0] > 2: left_has_more = True if left[0] > 1: first = True else: left = page_range[(page - 3) if (page - 3) > 0 else 0:page - 1] right = page_range[page:page + 2] if left[0] > 2: left_has_more = True if left[0] > 1: first = True if right[-1] < total_pages - 1: right_has_more = True if right[-1] < total_pages: last = True pageData = { 'left': left, 'right': right, 'left_has_more': left_has_more, 'right_has_more': right_has_more, 'first': first, 'last': last, 'total_pages': total_pages, 'page': page, }
返回额外变量
productsApp的views.py文件:
return render( request,'productList.html',{ 'active_menu':'products', 'sub_menu':submenu, 'productName':productName, 'productList':productList, 'pageData': pageData, })
后端全部代码
productsApp的views.py文件:
from django.shortcuts import render from django.shortcuts import HttpResponse from django.core.paginator import Paginator from .models import Product # Create your views here. def products(request,productName): submenu = productName if productName == 'robot': productName = '家用机器人' elif productName == 'monitor': productName = '智能监控' else: productName = '人脸识别解决方案' productList = Product.objects.all().filter( productType = productName).order_by('-publishDate') p = Paginator(productList, 2) if p.num_pages <= 1: pageData = '' else: page = int(request.GET.get('page', 1)) productList = p.page(page) left = [] right = [] left_has_more = False right_has_more = False first = False last = False total_pages = p.num_pages page_range = p.page_range if page == 1: right = page_range[page:page + 2] print(total_pages) if right[-1] < total_pages - 1: right_has_more = True if right[-1] < total_pages: last = True elif page == total_pages: left = page_range[(page - 3) if (page - 3) > 0 else 0:page - 1] if left[0] > 2: left_has_more = True if left[0] > 1: first = True else: left = page_range[(page - 3) if (page - 3) > 0 else 0:page - 1] right = page_range[page:page + 2] if left[0] > 2: left_has_more = True if left[0] > 1: first = True if right[-1] < total_pages - 1: right_has_more = True if right[-1] < total_pages: last = True pageData = { 'left': left, 'right': right, 'left_has_more': left_has_more, 'right_has_more': right_has_more, 'first': first, 'last': last, 'total_pages': total_pages, 'page': page, } return render( request,'productList.html',{ 'active_menu':'products', 'sub_menu':submenu, 'productName':productName, 'productList':productList, 'pageData': pageData, })
编辑前端页面
productList.html:
{% if pageData %} <div class="paging"> <ul id="pages" class="pagination pagination-sm pagination-xs"> {% if pageData.first %} <li><a href="?page=1">1</a></li> {% endif %} {% if pageData.left %} {% if pageData.left_has_more %} <li><span>...</span></li> {% endif %} {% for i in pageData.left %} <li><a href="?page={{i}}">{{i}}</a></li> {% endfor %} {% endif %} <li class="active"><a href="?page={{pageData.page}}">{{pageData.page}}</a></li> {% if pageData.right %} {% for i in pageData.right %} <li><a href="?page={{i}}">{{i}}</a></li> {% endfor %} {% if pageData.right_has_more %} <li><span>...</span></li> {% endif %} {% endif %} {% if pageData.last %} <li><a href="?page={{pageData.total_pages}}">{{pageData.total_pages}}</a></li> {% endif %} </ul> </div> {% endif %}
页面美观
products.css:
/* 分页控件样式 */ .paging{ text-align:center; } .pagination .active a{ background-color:#005197; border-color:#005197; }