Django前端BootCSS实现分页的方法

前言

在使用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分页功能的实现方法,并且提供了相关代码演示以供参考。

后端开发标签