通过使用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">

</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">首页</a></li>

        {% if user_list.has_previous %}

            <li class="page-item"><a class="page-link" href="./page?id={{ user_list.previous_page_number }}">上一页</a></li>

        {% else %}

            <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>

        {% endif %}

        {% for item in page_range %}

            {% if item == currentPage %}

                <li class="page-item active"><a class="page-link" href="./page?id={{ item }}">{{ item }}</a></li>

            {% else %}

                <li class="page-item"><a class="page-link" href="./page?id={{ item }}">{{ 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 }}">下一页</a></li>

        {% else %}

            <li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>

        {% endif %}

        <li class="page-item"><a class="page-link" href="./page?id={{ paginator.num_pages }}">尾页</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 实现分页的更多相关文章

  1. python 学习笔记十八 django深入学习三 分页，自定义标签，权限机制

    django  Pagination(分页) django 自带的分页功能非常强大,我们来看一个简单的练习示例: #导入Paginator>>> from django.core.p ...

  2. python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)

    一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...

  3. Django Rest framework 之 分页

    RESTful 规范 django rest framework 之 认证(一) django rest framework 之 权限(二) django rest framework 之 节流(三) ...

  4. django高级应用（分页功能）

    django高级应用(分页功能) 1.原生分页应用 前端html代码 <!DOCTYPE html> <html lang="en"> <head&g ...

  5. django上课笔记2-视图CBV-ORM补充-Django的自带分页-Django的自定义分页

    一.视图CBV 1.urls url(r'^login.html$', views.Login.as_view()), 2.views from django.views import View cl ...

  6. django cookie session 自定义分页

    cookie cookie的由来 http协议是无状态的,犹如人生若只如初见,每次都是初次.由此我们需要cookie来保持状态,保持客户端和服务端的数据通信. 什么是cookie Cookie具体指的 ...

  7. Django基础06篇 分页

    1.导入Django自带的分页类 from django.core.paginator import Paginator 2.分页类的使用 def index(request): # return H ...

  8. python模块，邮件推送交换机error级别以上log，django前端展示

    前情概要 原syslog服务器只收集不推送日志,可以实时展示,服务器在海外内网,办公网做的有分流,到日志服务器的流量送到香港,其余流量国内,疫情期间在家办公,每次连接需要拨海外l2tp,挂着梯子访问国 ...

  9. django 前端请求跨域问题解决

    django 前端请求跨域问题解决 笔者之前在做django-restful-api开发的时候,在前端请求页面发送请求的时候直接出现301,域名重定向的问题,经过一番查阅资料,终于得到了非常完美的解决 ...

随机推荐

  1. ESP8266- AP模式的使用

    打算通过该模式,利用手机APP完成配网 • AP,也就是无线接入点,是一个无线网络的创建者,是网络的中心节点.一般家庭或办公室使用的无线路由器就是一个AP. • STA站点,每一个连接到无线网络中的终 ...

  2. 数组转为unicode字符编码字符串

    json_encode($data, JSON_UNESCAPED_UNICODE)在创建微信卡券,发送数据时需要这个

  3. dedecms内页调用内容当中第一张图片

    在includes/extend.func.php末尾添加方法: //取第一张图地址 function firstimg($str_pic) { $str_sub=substr($str_pic,0, ...

  4. 5ucms 调用当前文章的评论，以及评论列表

    <div class="center_"> <h2>共有 {field:comments} 位网友发表了评论</h2> <ul class ...

  5. GUI自动化测试遇到的问题

    学习接口自动化测试框架或工具,UI自动化测试框架或工具,有时会觉得知识似乎比较零散,死记硬背不是一个好方法.一个学习的思路是思考使用这些框架或工具的时候,可能会遇到什么问题,遇到这些问题可以通过什么方 ...

  6. 使用jemeter构造各种变量数据

    使用手动创建测试数据太麻烦,因此考虑用jmeter写了一些创建测试数据的脚本,针对那些变量非固定的数据可以利用函数来实现 通过函数助手添加各种变量数据 Tools--->函数助手 1:生成当前时 ...

  7. Redis-Cluster分片扩容

    redis分片分片场景在业务量相对较小的时候,可以将所有数据都存到一台机器上,只使用redis单机模式,不存在分片问题.如果业务的数据量超过一台物理机器的内存大小时,则会面对扩展问题,需要多台机器去存 ...

  8. 大型项目源码集合「GitHub 热点速览 v.21.39」

    作者:HelloGitHub-小鱼干 代码,尤其是优雅规范的代码,一直都是学习编程技巧的捷径.虽然有实用的代码小片段,能拯救当前业务的燃眉之急,但是真要去提升自己的技能还是得从大型的项目,尤其是有一定 ...

  9. P6122-[NEERC2016]Mole Tunnels【模拟费用流】

    正题 题目链接:https://www.luogu.com.cn/problem/P6122 题目大意 给出\(n\)个点的一棵满二叉树,每个点有容量\(c_i\),\(m\)次从\(p_i\)处加一 ...

  10. Jenkins持续集成与部署

    一.Jenkins简介 在阅读此文章之前,你需要对Linux.Docker.Git有一定的了解和使用,如果还未学习,请阅读我前面发布的相关文章进行学习. 1.概念了解:CI/CD模型 CI全名Cont ...