专栏首页数据分析与挖掘django实战(一)--dango自带的分页(极简)

django实战(一)--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="1">
            <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="1">
            <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传值给后端,注意标蓝的地方。

学习不易,且学且珍惜!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • sklearn同时运行多个模型并进行可视化

    参考:https://blog.csdn.net/qq_34106574/article/details/82016442

    绝命生
  • django-模板之URL标签(五)

    绝命生
  • python中的容器序列类型collections

    实例方法 _asdict():把具名元组以 collections.OrdereDict 的形式返回,可以利用它来把元组里的信息友好的展示出来

    绝命生
  • 请不要忘了,有一个值叫 inherit

    请不要忘了,有一个值叫 inherit 下午在写组件的时候瞄了一眼qq群,看到有个哥们在问一道css的问题,他的问题如下图 ? 红圈部分超出主体的部分,他是用伪...

    练小习
  • JQuery干货篇之操控DOM

    通常在把新元素插入到DOM中的目标位置之前,要先创建一个新元素才能将它插入到指定位置

    爱撒谎的男孩
  • WebMagic爬取指定内容和一些特性介绍(附演示代码)

    可能有很多小伙伴不了解Xpath语法是什么,我就给大家稍微介绍下,想要了解更多可以百度或者后台联系我,XPath 是一门在 XML 文档中查找信息的语言。XPa...

    框架师
  • html5打开摄像头

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta content="text/html...

    李海彬
  • 【Recorder.js+百度语音识别】全栈方案技术细节

    技术栈:React+recorder-tool.js +recorder.js + Express + Baidu语音识别API

    大史不说话
  • 硅谷移动医疗有多牛?

    大数据文摘
  • 机器学习人工学weekly-2018/9/23

    Rosetta: Understanding text in images and videos with machine learning

    windmaple

扫码关注云+社区

领取腾讯云代金券