Django前端BootCSS实现分页的方法
通过使用bootstrap框架，并配合Django自带的Paginator分页组件即可实现简单的分页效果。
1.创建MyWeb项目
python manage.py startapp MyWeb
2.修改settings.py配置文件,导入我们的app的名字，去掉csrf这个选项
# 屏蔽一项
MIDDLEWARE = [
#'django.middleware.csrf.CsrfViewMiddleware'
]
# 新增一项
TEMPLATES = [
'MyWeb.apps.MywebConfig'
]
3.来urls.py里面写一条路由，名字就叫index/映射到views.index函数下处理此请求
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', views.index)
]
4.最后在myweb里面的views.py设置一个视图函数,最后运行
from django.shortcuts import render
from django.shortcuts import HttpResponse
from MyWeb import models
def index(requests):
return HttpResponse("abcd")
5.配置数据库文件models.py并设置以下内容
from django.db import models
# 创建用户表
class User(models.Model):
id = models.AutoField(primary_key=True)
username = models.CharField(max_length=32)
password = models.CharField(max_length=32)
6.更新数据库与数据表
python manage.py makemigrations # 将你的数据库变动记录下来(并不会帮你创建表) python manage.py migrate # 将你的数据库变动正在同步到数据库中
7.增加一个新的view并使用rand()函数.
首先在urls.py中增加路由
from django.contrib import admin
from django.urls import path
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/',views.index),
path('rand/',views.rand)
]
其次在view.py视图中增加生成函数.
from django.shortcuts import render
from django.shortcuts import HttpResponse
from MyWeb import models
import random
# 首页
def index(requests):
return HttpResponse("abcd")
# 生成测试数据
def rand(request):
for i in range(1,1000):
chars = []
pasd = []
for x in range(1,8):
chars.append(random.choice('abcdefghijklmnopqrstuvwxyz'))
pasd.append(random.choice('0987654321'))
user = "".join(chars)
pwd = "".join(pasd)
models.User.objects.create(username=user, password=pwd)
return HttpResponse("ok")
启动django并访问http://127.0.0.1:8000/rand/等待数据生成结束.
8.在templates模板中，新增一个page.html页面。
<!--name: page.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.lyshark.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="external nofollow" >
</head>
<body>
<table class="table table-sm table-hover">
<thead>
<tr class="table-success">
<th> 序号</th> <th> 用户名</th> <th> 用户密码</th>
</tr>
</thead>
<tbody>
{% for article in user_list %}
<tr class="table-primary">
<td>{{ article.id }}</td>
<td>{{ article.username }}</td>
<td>{{ article.password }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav class="d-flex justify-content-center" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="./page?id=1" rel="external nofollow" >首页</a></li>
{% if user_list.has_previous %}
<li class="page-item"><a class="page-link" href="./page?id={{ user_list.previous_page_number }}" rel="external nofollow" >上一页</a></li>
{% else %}
<li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" >上一页</a></li>
{% endif %}
{% for item in page_range %}
{% if item == currentPage %}
<li class="page-item active"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow" rel="external nofollow" >{{ item }}</a></li>
{% else %}
<li class="page-item"><a class="page-link" href="./page?id={{ item }}" rel="external nofollow" rel="external nofollow" >{{ item }}</a></li>
{% endif %}
{% endfor %}
{% if user_list.has_next %}
<li class="page-item"><a class="page-link" href="./page?id={{ user_list.next_page_number }}" rel="external nofollow" >下一页</a></li>
{% else %}
<li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" >下一页</a></li>
{% endif %}
<li class="page-item"><a class="page-link" href="./page?id={{ paginator.num_pages }}" rel="external nofollow" >尾页</a></li>
</ul>
</nav>
<div style="text-align: center;" class="alert alert-dark">
统计: {{ currentPage }}/{{ paginator.num_pages }} 共查询到:{{ paginator.count }} 条数据 页码列表:{{ paginator.page_range }}
</div>
</body>
</html>
9.最后在路由曾以及view中增加对应的URL以及路由函数.
首先在urls.py中增加一条新路由.
from django.contrib import admin
from django.urls import path
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/',views.index),
path('rand/',views.rand),
path('page',views.page)
]
接着在views.py中增加一个page函数.
from django.shortcuts import render
from django.shortcuts import HttpResponse
from MyWeb import models
import random
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
# 首页
def index(requests):
return HttpResponse("abcd")
# 生成测试数据
def rand(request):
for i in range(1,1000):
chars = []
pasd = []
for x in range(1,8):
chars.append(random.choice('abcdefghijklmnopqrstuvwxyz'))
pasd.append(random.choice('0987654321'))
user = "".join(chars)
pwd = "".join(pasd)
models.User.objects.create(username=user, password=pwd)
return HttpResponse("ok")
# 分页函数
def page(request):
user = models.User.objects.all()
paginator = Paginator(user, 10)
currentPage = int(request.GET.get("id",1))
if paginator.num_pages > 15:
if currentPage-5 < 1:
pageRange = range(1,11)
elif currentPage+5 > paginator.num_pages:
pageRange = range(currentPage-5,paginator.num_pages)
else:
pageRange = range(currentPage-5,currentPage+5)
else:
pageRange = paginator.page_range
try:
user_list = paginator.page(currentPage)
except PageNotAnInteger:
user_list = paginator.page(1)
except:
user_list = paginator.page(paginator.num_pages)
return render(request,"page.html",{"user_list":user_list,
"paginator":paginator,
"page_range":pageRange,
"currentPage":currentPage})
准备就绪之后，直接访问http://127.0.0.1:8000/page即可看到分页显示效果.
到此这篇关于Django前端BootCSS实现分页的方法的文章就介绍到这了,更多相关Django BootCSS分页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Django Paginator分页器的使用示例
# name: models.py from django.db import models class User(models.Model): id = models.AutoField(primary_key=True) username = models.CharField(max_length=32) password = models.CharField(max_length=32) # 插入测试数据 import random def index(request): for i in
-
Django drf分页器的使用详解
前言 当后台返回的数据过多时,我们就要配置分页器,比如一页最多只能展示10条等等,drf中默认配置了3个分页面 PageNumberPagination:基础分页器,性能略差 LimitOffsetPagination:偏移分页器 CursorPagination:游标分页器,性能强大 PageNumberPagination 基础分页器PageNumberPagination,数据量越大性能越差. 首先我们在app中创建一个pagination.py文件,然后自定义一个分页器类,继承自Page
-
通过 Django Pagination 实现简单分页功能
作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 当博客上发布的文章越来越多时,通常需要进行分页显示,以免所有的文章都堆积在一个页面,影响用户体验. Django 内置的 Pagination 能够帮助我们实现简单的分页功能,在上一篇教程中我们使用脚本批量生成了几百篇博客文章,正好用于测试分页效果. Paginator 类的常用方法 分页功能由 Django 内置的 Paginator 类提供,这个类位于 django.core.
-
Django分页器的用法详解
Django是一个大而全的框架.需要明确的是,传参进行分页获取分页后的数据,一般都是通过向服务器发送get请求的方式实现的,在向后端服务发送查看数据的同时可以携带一个或多个参数并发送get请求来实现分页查看功能 1.准备基础数据 设计表模型 为了体现分页的效果,需要先创建一个表并准备较多数据,模型如下 from django.db import models # Create your models here. class Book(models.Model): title = models.C
-
Django 自定义分页器的实现代码
为什么要实现分页? 在大部分网站中分页的功能都是必要的,尤其是在后台管理中分页更是不可或缺 分页能带给用户更好的体验,也能减轻服务器的压力 对于分页来说,有许多方法都可以实现 例如把数据全部读取出来在前端用javascript实现,但这样一次请求全部数据服务器压力很大, 还有就是在后端实现,每一次请求部分数据显示 分页需求: 1. 每页显示的多少条数据 2. 页面显示多少个页码 3. 上一页和下一页 4. 首页和尾页 效果演示: 代码实现: 分页类封装: 在我的app下创建一个page.py文件
-
Django 简单实现分页与搜索功能的示例代码
假设现有需求如下: 需要一个页面分页展示信息,在该页面添加搜索框以提供检索功能. 那么,我们知道,展示信息和检索功能是在同一个页面,也就是共用一个路由. 代码如下: 第一步,写路由:为了清晰,这里只给出主页和展示页面的路由. urls.py: from django.urls import path from . import views from django.conf.urls.static import static from django.conf import settings fro
-
如何在django中实现分页功能
1.在html页面中导入js文件和css文件 <link rel="stylesheet" href="../../../static/css/jquery.pagination.css" rel="external nofollow" > <script type="text/javascript" src="../../../static/js/jquery-1.12.4.min.js"
-
Django实现分页显示效果
Django中提供了一个类Paginator专门用来管理和处理分页数据,所以我们在使用之前先导入好相应的类,,另外这里我们也导入了待会会用到的处理异常的两个类 EmptyPage和PageNotAnInteger: from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger 接着编写好视图函数test: def test(request): course_list=CourseVideo.objects.all
-
Django实现简单的分页功能
Django 分页功能的实现,供大家参考,具体内容如下 创建项目创建APP,添加APP这些就不在多说我们这次重点来看到视图函数 下面是路由设置 视图函数继承TemplateView views.py class index4(ListView): template_name = 'index5.html' # 设置模板文件以至于找到该模板文件 extra_context = {'title': '人员信息表'} # 设置响应内容 queryset = PersonInfo.objects.all
-
Django分页器的用法你都了解吗
Django是一个大而全的框架.需要明确的是,传参进行分页获取分页后的数据,一般都是通过向服务器发送get请求的方式实现的,在向后端服务发送查看数据的同时可以携带一个或多个参数并发送get请求来实现分页查看功能 前面总结过drf框架中分页器的使用,本文主要介绍在利用Django开发MVT模型项目时分页器的使用 1.准备基础数据 设计表模型 为了体现分页的效果,需要先创建一个表并准备较多数据,模型如下 from django.db import models # Create your model