实战--dango自带的分页（极简）

注意，我将templates定义在项目的同级目录下：

在settings.py中配置

TEMPLATES = [

    {

        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        'DIRS': [os.path.join(BASE_DIR,'templates')],

        'APP_DIRS': True,

        'OPTIONS': {

            'context_processors': [

                'django.template.context_processors.debug',

                'django.template.context_processors.request',

                'django.contrib.auth.context_processors.auth',

                'django.contrib.messages.context_processors.messages',

            ],

        },

    },

]

urls.py

from django.urls import path

from . import views

app_name='person'

urlpatterns=[

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

    path('test/<int:pn>',views.test,name='test'),

]

views.py

from django.shortcuts import render

from .models import Book

from django.core.paginator import  Paginator

def test(request,pn=1):

    #获取所有的查询

    book_obj=Book.objects.all()

    #传给paginator，每页显示两条

    paginator=Paginator(book_obj,2)

    #pn是显示第几页，默认是第一页

    page=paginator.page(pn)

    #将page通过context传给前端

    context={'page':page}

    return render(request,'test/test.html',context=context)

models.py

class Book(models.Model):

    id = models.AutoField(primary_key=True)

    title = models.CharField(max_length=128,null=False)

    def __str__(self):

        return "book_title:{}".format(self.title)

tempates/test/test.html

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        li{

            float: left;

            list-style: none;

            margin-left: 5px;

        }

    </style>

</head>

<body>

<div>

    <div style="position: absolute;top: 35%;left: 40%;">

        <table border="">

            <thread>

                <tr>

                    <th>id</th>

                    <th>title</th>

                </tr>

            </thread>

            <tbody>

            {% for item in page %}

                <tr>

                    <td width="120px">{{item.id}}</td>

                    <td width="120px">{{item.title}}</td>

                </tr>

            {% endfor %}

            </tbody>

        </table>

    </div>

<!--底部分页按钮显示-->

<div style="position: absolute;top: 50%;left: 44%"

    <nav aria-label="Page navigation">

        <div class="pagination">

            <ul class="pagination" >

            {% if page.has_previous %}

                <li><a href="/test/{{page.previous_page_number}}"   aria-label="Previous">

                    <span aria-hidden="true">&laquo;</span></a></li>

            {% endif %}

            {% for num in page.paginator.page_range%}

                {%if pindex == page.number%}

                    <li><a href="">{{ num }}</a></li>

                {%else%}

                    <li><a href="/test/{{num}}">{{ num }}</a></li>

                {%endif%}

             {% endfor %}

             {% if page.has_next %}

                 <li><a href="{% url 'person:test' page.next_page_number %}" aria-label="Next">

                      <span aria-hidden="true">&raquo;</span></a></li>

              {% endif %}

            </ul>

        </div>

    </nav>

</div>

</body>

</html>

最终效果（不要在意css，不大美观，哈哈）

在显示下网页源代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        li{

            float: left;

            list-style: none;

            margin-left: 5px;

        }

    </style>

</head>

<body>

<div>

    <div style="position: absolute;top: 35%;left: 40%;">

        <table border="">

            <thread>

                <tr>

                    <th>id</th>

                    <th>title</th>

                </tr>

            </thread>

            <tbody>

                <tr>

                    <td width="120px">3</td>

                    <td width="120px">java</td>

                </tr>

                <tr>

                    <td width="120px">6</td>

                    <td width="120px">zabbix从入门到精通</td>

                </tr>

            </tbody>

        </table>

    </div>

<!--底部分页按钮显示-->

<div style="position: absolute;top: 50%;left: 44%"

    <nav aria-label="Page navigation">

        <div class="pagination">

            <ul class="pagination" >

                <li><a href="/test/1"   aria-label="Previous">

                    <span aria-hidden="true">&laquo;</span></a></li>

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

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

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

                 <li><a href="/test/3" aria-label="Next">

                      <span aria-hidden="true">&raquo;</span></a></li>

            </ul>

        </div>

    </nav>

</div>

</body>

</html>

总结：这是实现分页最简单的了，至于美观，可以结合bootstrap来进行美化。

技术总结：最基本的是Paginator里面的一些值（当然此处我并没有去尝试其他的，有兴趣的可以去搜下，也挺简单的）。然后其中的一个就是前端pn值如何通过url传值给后端，注意标蓝的地方。

学习不易，且学且珍惜！！！

实战--dango自带的分页（极简）的更多相关文章

.NET Core实战项目之CMS 第七章设计篇-用户权限极简设计全过程
写在前面这篇我们对用户权限进行极简设计并保留其扩展性.首先很感谢大家的阅读,前面六章我带着大家快速入门了ASP.NET Core.ASP.NET Core的启动过程源码解析及配置文件的加载过程源码解 ...
.NET Core实战项目之CMS 第八章设计篇-内容管理极简设计全过程
写在前面上一篇文章中我带着大家进行了权限部分的极简设计,也仅仅是一个基本的权限设计.不过你完全可以基于这套权限系统设计你的更复杂的权限系统,当然更复杂的权限系统要根据你的业务来进行,因为任何脱离实际 ...
【转】手摸手，带你用vue撸后台系列四(vueAdmin 一个极简的后台基础模板)
前言做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...
串口助手下载-带时间戳的串口助手-极简串口助手-V1.1 自动保存配置参数能显示收发时间方便调试
1.串口助手下载 2.带时间戳的串口助手,每次收发指令带上了时间戳,方便调试 3.极简串口助手 4.简单易用高速稳定 5.每次修改的参数都能自动保存,免去了重复配置的工作下载地址:http://w ...
.NET开源项目 QuarkDoc 一款自带极简主义属性的文档管理系统
有些话说在前头因为公司产品业务重构且功能拆分组件化,往后会有很多的接口文档需要留存,所以急需一款文档管理系统.当时选型要求3点: 1.不能是云平台上的Saas服务,整个系统都要在自己公司部署维护(数 ...
Nginx 极简教程（快速入门）
作者:dunwu github.com/dunwu/nginx-tutorial 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计模式内容聚合 4. ...
nginx极简教程
Nginx 极简教程本项目是一个 Nginx 极简教程,目的在于帮助新手快速入门 Nginx. examples 目录中的示例模拟了工作中的一些常用实战场景,并且都可以通过脚本一键式启动,让您可以快 ...
自制 os 极简教程1：写一个操作系统有多难
为什么叫极简教程呢?听我慢慢说不知道正在阅读本文的你,是否是因为想自己动手写一个操作系统.我觉得可能每个程序员都有个操作系统梦,或许是想亲自动手写出来一个,或许是想彻底吃透操作系统的知识.不论是为了 ...
CSharpGL(28)得到高精度可定制字形贴图的极简方法
CSharpGL(28)得到高精度可定制字形贴图的极简方法回顾以前我用SharpFont实现了解析TTF文件从而获取字形贴图的功能,并最终实现了用OpenGL渲染文字. 使用SharpFont,美 ...

随机推荐

Redis数据库之KEY的操作与事务管理
目的了解并掌握各种数据类型的命令操作方式,以及各种数据类型值的操作方式.同时,主要培养对KEY的操作命令运用的能力.重点掌握对KEY信息的管理.事务常规管理和事务回滚操作. KEYS命令的练习,对K ...
javascript:history.go(-1)的使用
1.问题描述在微信项目开发中,比如常用联系人的增删改查操作中,比如跳入常用联系人管理页面,选中一个联系人修改它,就会跳入修改页面,修改完成后跳转到常用联系人管理页面,此时如果修改成功跳转采用的是页面 ...
java 队列和栈及示例
一.栈的实现: 1.Stack实现接口实现: class Stack<E> extends Vector<E> {......} 常用的api函数如下: boolean is ...
机器学习回顾篇（6）：KNN算法
1 引言本文将从算法原理出发,展开介绍KNN算法,并结合机器学习中常用的Iris数据集通过代码实例演示KNN算法用法和实现. 2 算法原理 KNN(kNN,k-NearestNeighbor)算法, ...
有了 CompletableFuture，使得异步编程没有那么难了！
本文导读: 业务需求场景介绍技术设计方案思考 Future 设计模式实战 CompletableFuture 模式实战 CompletableFuture 生产建议 CompletableFutur ...
基本IO操作--字节流
一.InputStream与OutputStream1. 输入与输出我们编写的程序除了自身会定义一些数据信息外,经常还会引用外界的数据,或是将自身的数据发送到外界.比如,我们编写的程序想读取一个文本 ...
在chrome浏览器中调用IE浏览器并访问（openIE.reg自定义协议）
在谷歌浏览器中有4种方法调用IE浏览器.如下: c++ socket通过浏览器在ie中打开指定url : vb生成exe,url访问exe启动ie并打开指定url : 通过socket实现通过http ...
laravel学习之旅
前言:之前写了二篇YII2.0的基本mvc操作,所以,打算laravel也来这一下 *安装现在一般都用composer安装,这里就不讲述了* 一.熟悉laravel (1)如果看到下面这个页面,就说明 ...
java23种设计模式（二）抽象工厂模式
我们接着上一章的工厂方法模式继续学习一下抽象工厂模式. 抽象工厂模式:在工厂模式中,如果有多个产品,则就是抽象工厂模式. 例子: 有一个工厂开了两个子公司,专门用来生产电脑配件键盘和鼠标,一个是联想工 ...
「3D建模」ZBrush如何雕刻头部
加载项目开始 1. 如果未显示灯箱,请按逗号(,)或灯箱按钮. 2. 单击项目选项卡,然后双击DefaultSphere项目.它将被加载到ZBrush中. 3. 在工具>几何子选项板中,将SDi ...

实战--dango自带的分页（极简）

实战--dango自带的分页（极简）的更多相关文章

随机推荐

热门专题