目录
- 原生Paginator
- 利用bootstrap改进Paginator
- Pure_Pagination
原生Paginator
urls.py
from django.conf.urls import include, url
from app01 import views as app01_views
urlpatterns = [
url(r'^index/$', app01_views.index),
]views.py
from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
from django.shortcuts import render
from .models import Publisher
def index(request):
publishers = Publisher.objects.all()
paginator = Paginator(publishers, 2) # 每页三条数据
page = request.GET.get('page')
try:
contacts = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer, deliver first page.
contacts = paginator.page(1)
except EmptyPage:
# If page is out of range (e.g. 9999), deliver last page of results.
contacts = paginator.page(paginator.num_pages)
return render(request, 'index.html', locals())index.html
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
<div class="container">
<h2>机构列表</h2>
<div class="row">
<table class="table table-striped">
<tr>
<td>机构名称</td>
<td>机构地址</td>
</tr>
{% for p in contacts.object_list %}
<tr>
<td>{{ p.title }}</td>
<td>{{ p.address }}</td>
</tr>
{% endfor %}
</table>
<div class="pagination">
<span class="step-links">
{% if contacts.has_previous %}
<a href="?page={{ contacts.previous_page_number }}">previous</a>
{% endif %}
<span class="current">
Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
</span>
{% if contacts.has_next %}
<a href="?page={{ contacts.next_page_number }}">next</a>
{% endif %}
</span>
</div>
</div>
</div>
</body>
</html>页面展示
利用bootstrap改进Paginator
参考：https://v3.bootcss.com/components/#pagination-default
index.html
<!DOCTYPE html>
<html lang="en">
{% load static %}
{% load my_tag %}
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
<div class="container">
<h2>机构列表</h2>
<div class="row">
<table class="table table-striped">
<tr>
<td>机构名称</td>
<td>机构地址</td>
</tr>
{% for p in contacts.object_list %}
<tr>
<td>{{ p.title }}</td>
<td>{{ p.address }}</td>
</tr>
{% endfor %}
</table>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
{% if contacts.has_previous %}
<a href="?page={{ contacts.previous_page_number }}">上一页</a>
{% endif %}
</li>
{% pager_list contacts %}
<li>
{% if contacts.has_next %}
<a href="?page={{ contacts.next_page_number }}">下一页</a>
{% endif %}
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>my_tag.py
from django.template import Library
from django.utils.safestring import mark_safe
register = Library()
@register.simple_tag
def pager_list(contacts):
pager_str = ''
for i in range(contacts.paginator.num_pages):
active = ''
# 若为当前页面页码，则高亮显示
if contacts.number == i + 1:
active = 'active'
li_str = '<li class=%s><a href="?page=%s">%s</a></li>' % (active, i + 1, i + 1)
pager_str += li_str
return mark_safe(pager_str)改进后显示
弊端
当数据很大，页码数量过多，那么一次性就不能将页码都显示出来。
Pure_Pagination
安装模块：
- 源码下载：https://github.com/jamespacileo/django-pure-pagination
- 利用pip安装下载后的zip文件。
setting.py
INSTALLED_APPS = (
'pure_pagination',
)
PAGINATION_SETTINGS = {
'PAGE_RANGE_DISPLAYED': 3,
'MARGIN_PAGES_DISPLAYED': 2,
'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}PAGE_RANGE_DISPLAYED is the number of pages neighbouring the current page which will be displayed (default is 10)
MARGIN_PAGES_DISPLAYED is the number of pages neighbouring the first and last page which will be displayed (default is 2)
views.py
from django.shortcuts import render
from .models import Publisher
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
def index(request):
publishers = Publisher.objects.all()
try:
# 获取页码数
page = request.GET.get('page', 1)
except PageNotAnInteger:
page = 1
p = Paginator(publishers, request=request, per_page=1)
contacts = p.page(page)
return render(request, 'index.html', locals())index.html
方式1：没有任何样式
{{ contacts.render }}方式2：
<!DOCTYPE html>
<html lang="en">
{% load static %}
{% load my_tag %}
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
<div class="container">
<h2>机构列表</h2>
<div class="row">
<table class="table table-striped">
<tr>
<td>机构名称</td>
<td>机构地址</td>
</tr>
{% for p in contacts.object_list %}
<tr>
<td>{{ p.title }}</td>
<td>{{ p.address }}</td>
</tr>
{% endfor %}
</table>
{% load i18n %}
<nav >
<ul class="pagination{% if size %} pagination-{{ size }}{% endif %}">
{% if contacts.has_previous %}
<li class="previous">
<!--此处携带当前页的过滤字段参数，-->
<a href="?{{ contacts.previous_page_number.querystring }}"
aria-label="{% trans 'previous page' %}">
<span aria-hidden="true">上一页</span>
{% if verbose %}<span class="hidden-xs">{% trans 'previous page' %}</span>{% endif %}
</a>
</li>
{% else %}
<li class="previous disabled">
<span>
<span aria-hidden="true">上一页</span>
{% if verbose %}<span class="hidden-xs">{% trans 'previous page' %}</span>{% endif %}
</span>
</li>
{% endif %}
{% for page in contacts.pages %}
{% if page %}
{% if page == contacts.number %}
<li class="active">
<a href="?{{ page.querystring }}">{{ page }} <span
class="sr-only">({% trans 'current page' %})</span></a>
</li>
{% else %}
<li>
<a href="?{{ page.querystring }}">{{ page }}</a>
</li>
{% endif %}
{% else %}
<li class="disabled">
<span>...</span>
</li>
{% endif %}
{% endfor %}
{% if contacts.has_next %}
<li class="next">
<a href="?{{ contacts.next_page_number.querystring }}" aria-label="{% trans 'next page' %}">
{% if verbose %}<span class="hidden-xs">{% trans 'next page' %}</span>{% endif %}
<span aria-hidden="true">下一页</span>
</a>
</li>
{% else %}
<li class="next disabled">
<span>
{% if verbose %}<span class="hidden-xs">{% trans 'next page' %}</span>{% endif %}
<span aria-hidden="true">下一页</span>
</span>
</li>
{% endif %}
</ul>
</nav>
</div>
</div>
</body>
</html>5、最终效果展示
原文地址：https://www.cnblogs.com/fqh202/p/9456602.html
时间： 2024-07-31 15:37:21