Django前端BootCSS实现分页的方法

 更新时间:2021年11月02日 15:19:05   作者:lyshark  
本文主要介绍了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分页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Tensorflow中TFRecord生成与读取的实现

    Tensorflow中TFRecord生成与读取的实现

    TFRecord格式的文件存储形式会很合理的帮我们存储数据,本文主要介绍了Tensorflow中TFRecord生成与读取的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • python练习之曾经很火的小人画爱心表白代码

    python练习之曾经很火的小人画爱心表白代码

    小编有个好兄弟最近在追妹子,跟妹子打得火热!就差临门一脚了,这一jio我帮忙补上去了!他问有没有什么酷炫的表白方式,可以给人心动的赶jio,表白的方式有许多种今天小编来教大家一个之前很火的小人画爱心表白代码
    2021-09-09
  • python3 pillow模块实现简单验证码

    python3 pillow模块实现简单验证码

    这篇文章主要为大家详细介绍了python3 pillow模块实现简单验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 使用matplotlib绘制热图(heatmap)全过程

    使用matplotlib绘制热图(heatmap)全过程

    这篇文章主要介绍了使用matplotlib绘制热图(heatmap)全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • python装饰器练习题及答案

    python装饰器练习题及答案

    这篇文章主要介绍了python装饰器练习题及答案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 使用python把xmind转换成excel测试用例的实现代码

    使用python把xmind转换成excel测试用例的实现代码

    这篇文章主要介绍了使用python把xmind转换成excel测试用例的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • 简述Python2与Python3的不同点

    简述Python2与Python3的不同点

    在Python2和Python3中都提供print()方法来打印信息,但两个版本间的print稍微有差异。下面通过本文给大家介绍Python2与Python3的不同点,需要的朋友参考下
    2018-01-01
  • python深度学习标准库使用argparse调参

    python深度学习标准库使用argparse调参

    这篇文章主要为大家介绍了python深度学习标准库使用argparse调参实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • python实现tail -f 功能

    python实现tail -f 功能

    这篇文章主要介绍了python实现tail -f 功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • python正则表达式中的括号匹配问题

    python正则表达式中的括号匹配问题

    这篇文章主要介绍了python正则表达式中的括号匹配问题,需要的朋友可以参考下
    2014-12-12

最新评论