前言
在使用Django框架开发Web应用时,前端页面的实现是必不可少的一步。而对于数据量较多的页面,分页是一个非常实用的功能。Bootstrap是一个十分优秀的前端框架,本文将介绍如何使用Bootstrap的分页框架BootCSS来实现Django的分页功能。
安装BootCSS
BootCSS是Bootstrap的分页框架,使用它需要先引入Bootstrap。如果你的Django项目中还没有Bootstrap,需要先安装并引入才可以使用BootCSS。
安装Bootstrap
# 在命令行中输入以下命令安装Bootstrap
pip install django-bootstrap4
引入Bootstrap
在需要使用Bootstrap的HTML文件开头部分,使用以下方式引入:
{% load bootstrap4 %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
...
实现分页
为了使用BootCSS实现分页,需要导入BootCSS的pagination.css文件。
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/paginationjs/2.1.4/pagination.css">
后台实现
在后台代码中,需要引入Django自带的分页插件pagination来进行分页操作,并将分页信息传入前端页面。
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
def index(request):
article_list = Article.objects.all()
paginator = Paginator(article_list, 5) # 每页显示5篇文章
page = request.GET.get('page')
try:
articles = paginator.page(page)
except PageNotAnInteger:
articles = paginator.page(1)
except EmptyPage:
articles = paginator.page(paginator.num_pages)
return render(request, 'index.html', {'articles': articles})
前端显示
在前端页面HTML文件中,需要使用BootCSS的pagination样式来实现显示分页信息。
{% if articles.has_other_pages %}
<div class="pagination-container">
<ul class="pagination">
{% if articles.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ articles.previous_page_number }}>" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
{% endif %}
{% for i in articles.paginator.page_range %}
{% if articles.number == i %}
<li class="page-item active">
<span class="page-link">{{ i }}</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="?page={{ i }}>">{{ i }}</a>
</li>
{% endif %}
{% endfor %}
{% if articles.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ articles.next_page_number }}>" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
总结
本文介绍了如何使用Django自带的分页插件palette以及BootCSS框架来实现Django分页功能的实现方法,并且提供了相关代码演示以供参考。