django的组件-分页器

django的组件-分页器

引入分页器

在博客园中，如果每个人都发表一篇文章的话，如果咱们不进行分页的话，那么博客园的首页将会变得异常庞大，而且你永远不知道你要拉到什么什么时候才能拉到最底部，此时咱们的分页器就派上了用场，规定每个html页面只显示多少篇文章，给我们带来了大大的便利。

以下是博客园的分页器：

此时咱们需要做的就是这样一个类似的分页器。

分页器demo

创建数据库模型

我们首先做的就是数据库的模型，在这里给Book表定义了两个字段，title和price：

from django.db import models

# Create your models here.

class Book(models.Model):

    title = models.CharField(max_length=32)

    price = models.DecimalField(max_digits=8, decimal_places=2)

然后我们需要运行数据库迁移命令：

python3 manage.py makemigrations

python3 manage.py migrate

因为没有对数据库进行特殊设置，则默认使用的是sqlite数据库，此时咱们点击pycharm查看新创建的数据库：

此时表创建出来了，那么数据从哪来呢？我们肯定是不可能手写的，所以，我们使用批量增加的方式将100条数据添加到数据库中。

url控制器

需要给程序提供一个入口，当用户输入127.0.0.1:8000/index便进行驶入匹配，如果成功则进入到视图函数中：

from django.contrib import admin

from django.urls import path

from app01 import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('index/', views.index),

]

views视图函数

from django.shortcuts import render

from .models import Book

# Create your views here.

def index(request):

    # 通过批量插入bulk_create的方式插入数据，这种方式是一条sql插入100条数据

    book_list = []

    for i in range(100):

        book = Book(title='boos_%s' % i, price=i*i)

        book_list.append(book)

    Book.objects.bulk_create(book_list)

    book_list = Book.objects.all()

    return render(request, 'index.html', locals())

此时咱们就成功创建了视图函数，那么如果我们想将所有的数据展示出来的话，咱们需要一个index.html。

templates模板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

    <ul>

        {% for book in book_list %}

            <li>{{ book.title }}&nbsp;&nbsp;&nbsp;{{ book.price }}</li>

        {% endfor %}

    </ul>

</body>

</html>

此时咱们将项目启动起来，然后去浏览器查看：

此时的100条数据全部生成了，要记住的是：当数据批量插入后，需要将批量插入数据库的语句给注释掉。

为什么要用分页器

我们可以查看到100条数据就已经这么多了，但是数据不是一成不变的吗，所以我们需要使用分页器。

导入分页器

在视图函数中导入分页器需要用到这么一句话：

from django.core.paginator import Paginator

此时我们导入的是Paginator类，我们需要实例化成对象，那么这个对象就有自己的属性和方法：

实例化Pagintor对象

需要在视图函数中添加这么一句话来实例化对象：

# 进行实例化

paginator = Paginator(book_list, 10)

这句话的意思就是对book_list进行分页，每页显示10条数据。

那么我们说过，实例化的对象有自己的属性和方法，这里有三个属性，分别是：count、num_pages、page_range

# 实例化的方法和属性

print('总数：', paginator.count)

print('总页数：', paginator.num_pages)

print('页码的列表：', paginator.page_range)

此时让我们重新发送一个请求，然后再pycharm中查看打印结果：

此时就已经获取到了总数、总页数了，此时我们就可以进行下一步操作了。

获取每一页的数据

这个我们可想而知，肯定是1页10条数据，那么我们此时就需要得到这个页码：

# 获取当前页码

current_page_num = int(request.GET.get('page', 1))

request.GET.get('page')获取当前的页码，1代表的是默认显示第一页。

那么我们只是拿到了这个页码，这个数据从哪里拿呢？肯定是从分页器对象里面拿了：

# 根据页码拿到数据

current_page = paginator.page(current_page_num)

此时，这个current_page就是某一页的数据，然后我们需要在模板中更新语法成：

<ul>

    {% for book in current_page %}

        <li>{{ book.title }}&nbsp;&nbsp;&nbsp;{{ book.price }}</li>

    {% endfor %}

</ul>

此时大功告成，我们刷新浏览器就能看到结果了。

如果我们想访问第二页的数据，那么我们需要在浏览器输入http://127.0.0.1:8001/index/?page=2就能访问第二页的数据：

此时咱们就大功告成了，展示下源代码：

# views.py

from django.shortcuts import render

from .models import Book

from django.core.paginator import Paginator

# Create your views here.

def index(request):

    '''

    # 通过批量插入bulk_create的方式插入数据，这种方式是一条sql插入100条数据

    book_list = []

    for i in range(100):

        book = Book(title='boos_%s' % i, price=i*i)

        book_list.append(book)

    Book.objects.bulk_create(book_list)

    '''

    book_list = Book.objects.all()

    # 进行实例化

    paginator = Paginator(book_list, 10)

    # 实例化的方法和属性

    print('总数：', paginator.count)

    print('总页数：', paginator.num_pages)

    print('页码的列表：', paginator.page_range)

    # print(request.GET.get('page'))

    current_page_num = int(request.GET.get('page', 1))

    current_page = paginator.page(current_page_num)

    return render(request, 'index.html', locals())

# urls.py

from django.contrib import admin

from django.urls import path

from app01 import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('index/', views.index),

]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

    <ul>

        {% for book in current_page %}

            <li>{{ book.title }}&nbsp;&nbsp;&nbsp;{{ book.price }}</li>

        {% endfor %}

    </ul>

</body>

</html>

没跟上的同学检查下代码。

分页器优化1

你们真的以为大功告成了吗？当然是没有的，举个简单的来说，如果page=-1的话，或者超过了最大页数的话，会怎么样？

报错了，既然报错了咱们就需要捕获异常，因为我们输入的是-1或者10以上都会报错，那么不如让都跳转到第一页去：

# 异常捕获

try:

    current_page_num = int(request.GET.get('page', 1))

    current_page = paginator.page(current_page_num)

except Exception as e:

    current_page = paginator.page(1)

那么当我们再次输入-1的时候，就没有问题了：

那么这个问题就解决了。

分页器优化2

咱们需要在浏览器自己输入这个page是不是特别麻烦，所以，我们需要利用bootstrap来实现点击跳转，具体的就是引入bootstrap的分页器。

我们需要在index.html中添加bootstrap分页器组件：

# 添加bootstrap分页器组件

<nav aria-label="Page navigation">

  <ul class="pagination">

    <li>

      <a href="#" aria-label="Previous">

        <span aria-hidden="true">上一页</span>

      </a>

    </li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><a href="#">5</a></li>

    <li>

      <a href="#" aria-label="Next">

        <span aria-hidden="true">下一页</span>

      </a>

    </li>

  </ul>

</nav>

那么这个时候咱们再去浏览器刷新的时候，就可以看到效果，当然，这些标签点击了也是没有任何作用的：

接下来咱们需要对每个li设置动作；

有多少页就设置多少个li

因为咱们直接引用的bootstrap组件就只有5个，所以我们有多少页就需要设置多少给li标签：

# 

{% for item in paginator.page_range %}

    <li><a href="?page={{ item }}">{{ item }}</a></li>

{% endfor %}

首先这个paginator是一个分页器对象，然后呢page_range表示的页码的列表，那么我们对这个进行循环的话，就可以做到有多少页就设置多少个li标签了。

这里是浏览器刷新后的效果：

然后当我们点击这1-10就可以实现跳转了：

现在呢是完成了这个标签的，但是我们发现没有，你点击了5然后跳转到了第5页，你从请求url中看到了这是第5页，但是这个li标签却看不出来，所以我们还需要将点击的Li标签加一个class:

为点击的li标签添加class样式

咱们在views视图中获取到了每一页的页码current_page_num，然后我们在模板中也拿到了页码item，那么我们如果让这两个值相同的话，就给它加一个样式：

{% for item in paginator.page_range %}

    {% if current_page_num == item %}

        <li class="active"><a href="?page={{ item }}">{{ item }}</a></li>

        {% else %}

        <li><a href="?page={{ item }}">{{ item }}</a></li>

    {% endif %}

{% endfor %}

下面是浏览器上看到的效果

因为咱们的上一页和下一页是没有进行设置的，所以点击是没有进行任何跳转的。

首先解决咱们的下一页，思路是这样的：比如我们现在在第9页上，对第九页进行判断，如果存在下一页那就跳转到下一页去，如果没有，那么这个li标签就不能跳转，即给他禁止：

# 下一页

{% if current_page.has_next %}

    <li>

      <a href="?page={{ current_page.next_page_number }}" aria-label="Next">

        <span aria-hidden="true">下一页</span>

      </a>

    </li>

    {% else %}

    <li class='disabled'>

      <a href="#" aria-label="Next">

        <span aria-hidden="true">下一页</span>

      </a>

    </li>

{% endif %}

看一下效果图：

那么同理，上一页也是这样做到的：

# 上一页

{% if current_page.has_previous %}

  <li>

      <a href="#" aria-label="Previous">

        <span aria-hidden="true">上一页</span>

      </a>

  </li>

  {% else %}

   <li class="disabled">

      <a href="#" aria-label="Previous">

        <span aria-hidden="true">上一页</span>

      </a>

    </li>

{% endif %}

当到了第一页的时候，就不能点击上一页了。

扩展知识点

首先让我们看一下现象

如果领导吩咐每一页只显示5行数据的话，那么就会有20页，那么如果一页就显示2条数据的话呢？所以这些肯定是不合理的，咱们需要根据这个页码进行修改：

current_page_num = int(request.GET.get('page', 1))  # 显示第一页的页码

if paginator.num_pages > 11:  # 如果总页数大于19，就进入到这个判断中

    if current_page_num-5 < 1:  # 如果当前所在的页数减去5页小于1

        page_range = range(1, 11)  # 那么页码的范围就是1-11

    elif current_page_num+5 > paginator.num_pages:   # 如果当前页数+5大于总页数

        page_range = range(paginator.num_pages-11, paginator.num_pages+1)  # 那么此时页码的范围就是总页数减去11到总页码+1

    else:

        page_range = page_range = range(current_page_num-5, current_page_num+5)  # 其余情况就显示在中间

else:

    page_range = paginator.page_range

当咱们的请求发过去，只有两种情况：

1.总页数大于11

2.总页数小于11

如果小于11的话，那么就走下面的else，如果页数大于11，那么就走上面的条件判断，此时的条件判断分为三种情况（因为我们想让这个页码一直显示在中间）：

1.如果当前页码减去5页的话小于1页，那么此时页码的范围就是1-11

2.如果当前页码加上5页大于总页数的话，那么此时的页码范围就是当前页数减去11页到当前页数加上1页之间，左合右开

3.如果都不符合，那么就显示在中间

那么此时刷新浏览器就能看到：

第一种情况:

第二种情况：

第三种情况：

那么此时咱们就完成了分页器。

django中的分页器组件的更多相关文章

Django中的form组件
Django中的form组件有两大作用 1.验证获取正确的结果或者错误信息 2.生成html代码一.为什么需要form组件呢? 在写form表单,提交数据时,自己写验证的代码是一件非常困难的事情. ...
django中的forms组件
form介绍用户需要向后端提交一些数据时,我们常常把这些数据放在一个form表单里,采用form标签,里面包含一些input等标签把用户的数据提交给后端. 在给后端提交数据的时候,我们常常也需要对于 ...
django中的ajax组件
目录 django中的ajax 向服务器发送请求的途径 Ajax的特点基于jquery实现的ajax请求利用ajax实现计算器利用ajax实现登陆认证利用form表单进行文件上传利用ajax ...
（31）django中的分页器
book_list = models.Book.objects.all() #查出指定表中的所有数据paginator = Paginator(book_list,2) #实例化对象,传入 ...
django中使用Form组件
内容: 1.Form组件介绍 2.Form组件常用字段 3.Form组件校验功能 4.Form组件内置正则校验参考:https://www.cnblogs.com/liwenzhou/p/87478 ...
django中的forms组件(权限信息校验，增删改查)
1.用处 1.用户请求数据验证 2.自动生成错误信息 3.打包用户提交的正确信息 4.如果其中有一个错误了,其他的正确,则保留上次输入的内容 5.自动创建input标签并可以设置样式 6.基于form ...
Pyhon之Django中的Form组件
Pyhon之Django中的Form组件新手上路 Django的Form主要具有一下几大功能: 生成HTML标签验证用户数据(显示错误信息) HTML Form提交保留上次提交数据初始化页面 ...
Django中的admin组件分析
admin的使用介绍 django-admin的使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.可以在项目的 setting ...
Flask-wtforms类似django中的form组件
一.安装 pip3 install wtforms 二.简单使用 1.创建flask对象 from flask import Flask, render_template, request, redi ...

随机推荐

H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除预览效果图: 代码说明: 1.input:file选择图片 <!- ...
[设计模式][C++]单例模式
参考:http://blog.csdn.net/hackbuteer1/article/details/7460019 单例模式意图是保证一个类仅有一个实例,并提供一个访问它的全局访问点,该实例被所有 ...
【Golang 接口自动化01】使用标准库net/http发送Get请求
发送Get请求使用Golang发送get请求很容易,我们还是使用http://httpbin.org作为服务端来进行演示. package main import ( "bytes&quo ...
mybatis：多对多查询[转]
加入3个包 log4j-1.2.17.jar mybatis-3.3.0.jar mysql-connector-java-5.1.8.jar log4j需要配置 log4j.properties # ...
yii CComponent组件实例说明1
yii CComponent组件实例说明 yii中的module,controller都是CComponent的子类,可以说yii的架构基石就是依托在CCompnent基础上的,这里研究下CComp ...
如何给wpf的按钮添加背景图片
1:简单实用 <Button Height="143" HorizontalAlignment="Left" Margin="30,34,0,0 ...
php实现频率限制
一.前言公司要做呼叫中心,呼叫中心为了防止骚扰,需要限制用户拨打电话的频率,比如30s只能点击一次.这样的需求是通过redis来实现的. 二.具体实现 <?php class Resource ...
mysql导出导入数据库表
1.下载数据库 mysqldump db_name -h 192.168.5.162 -uroot -p > /var/www/db_name.sql(这个可以自定义) 2,下载数据库中的某个 ...
字符串 dfs
1222: FJ的字符串 [水题] 时间限制: 1 Sec 内存限制: 128 MB 提交: 52 解决: 9 状态题目描述 FJ在沙盘上写了这样一些字符串: A1 = “A” A2 = “ ...
Leetcode 79
//这是我写过最难的递归了...//class Solution { public: bool exist(vector<vector<char>>& board, s ...

django中的分页器组件