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">

</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})