WEB框架-Django组件学习-分页器学习

时间 2019-11-17 标签 web 框架 django 组件学习分页

1.分页器基础学习

1.1 补充知识-批量建立

数据库中数据批量建立，不要每建立一个就往数据库中塞一个，会形成撞库，形成大量I/O操做，速速较慢，应该采用一次性建立大量数据，一次性将大量数据塞入到数据库中。css

主要用到：库名.objects.bulk_create(数据)html

def index(request):
    book_list=[]
    for i in range(1,101):
        book = Book(title="book%s"%i,price=i*i)
        book_list.append(book)

    # 数据批量添到数据库中
    Book.objects.bulk_create(book_list)
    return HttpResponse("ok")

展现以下前端

1.2 django自带分页器组件

1.2.1 django经常使用参数

#分页器组件导入
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger

#全局信息查询

paginator = Paginator(book_obj,10) ：分页对象，俩个参数，第一个为数据，第二个为每页展现的数量  
paginator.count：  展现分页的数据大小
paginator.num_pages：展现总计分页数量
paginator.page_range ：相似range的数据类型

#单页信息查询

page = paginator.page(1)#页面对象
page.object_list#打印当前页面的数据量大小
page.has_next()#是否有下一页
page.has_previous()#是否有上一页
page.next_page_number()#当前页的上一页的页码是多少
page.previous_page_number()#当前页的下一页的页码是多少

1.2.2 其余参数数据库

1.3 分页器的基本应用

1.3.1 分页展现数据

def book_list(request):
  
    book_obj = Book.objects.all()
    # 分页器对象
    paginator = Paginator(book_obj,10)
    # 获取当前页码
    current_page = int(request.GET.get("page"))
    # 实例一个页面对象
    page = paginator.page(current_page)



    return render(request,'book_list.html',locals())
#须要注意的是：在模板层记得更改循环的对象

展现以下npm

1.3.2 错误页展现

对于超出的页码以及错误输入默认展现第一页django

展现以下，错误跳转以及默认跳转bootstrap

1.3.3 页面页码显示

页面页码展现主要是模板层代码改变app

首先调用bootstrap,或文件或cdnide

页面展现函数

page.has_next()#是否有下一页
page.has_previous()#是否有上一页
page.next_page_number()#当前页的上一页的页码是多少
page.previous_page_number()#当前页的下一页的页码是多少

展现以下

视图层完整代码

def book_list(request):

    book_obj = Book.objects.all()
    # 分页器对象
    paginator = Paginator(book_obj,10)
    try:
        # 获取当前页码,后面默认页为1
        current_page = int(request.GET.get("page"))
        # 实例一个页面对象
        page = paginator.page(current_page)
    # 错误页码默认跳转到首页
    except EmptyPage as e:
        page = paginator.page(1)

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

视图层

模板层完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<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>
<h3>展现数据</h3>
<ul>
    {% for foo in page %}
        <li>{{ foo }}</li>

    {% endfor %}

</ul>
<nav aria-label="Page navigation">
  <ul class="pagination">
    {% if page.has_previous %}
        <li>
            <a href="?page={{ page.previous_page_number }}" 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 %}
        {% for num in paginator.page_range %}
            {% if current_page == num %}
                <li class="active"><a href="?page={{ num }}">{{ num }}</a></li>
            {% else %}
                <li><a href="?page={{ num }}">{{ num }}</a></li>
            {% endif %}

        {% endfor %}
    {% if page.has_next %}
        <li>
          <a href="?page={{ 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 %}

  </ul>
</nav>
</body>
</html>

模板层

1.4 分页器的高阶应用

1.4.1 动态加载页码

多余多数据的时候，动态的展现页码，例如博客园的样式

逻辑展现

主要模仿博客园这样，在小于必定页数，默认展现10页，在超过必定页数，展现左5与右5的页码，到最后的必定页面，固定展现必定页数

当总页码小于11页时，pageRange = paginator.page_range，展现全部页码便可
当页码大于11页时，

当当前页码-5<1时，固定展现：pageRange = range(1,11)
当当前页码+5>最大页码，展现最后11页：pageRange=range(paginator.num_pages-10,paginator.num_pages+1)
其余则正常显示，左5与右5页码：pageRange=range(current_page - 5,current_page+6)

2.模仿django分页器实现本身的分页器组件

2.1 基本展现数据

展现以下，又变成了最开始的样子。。。。。

2.2 自定义页码展现

2.2.1 页码逻辑设置

处理逻辑和以前的一致，不过有部分区别就是不在是固定的页码，反而是动态的获取

2.2.2 前端页面书写

在一样的函数体内书写

模板层

最后展现

2.3 保留搜索条件

保留搜索条件主要是用于后面用于serch，action，分类时调用参数使用，因此须要保留搜索条件

2.3.1 补充知识点

querydict字典，默认不能编辑

结果报错

若是想要编辑就须要导入包，进行深copy操做

在源码中若是是作copy操做则能够编辑

将querydict的操做转换为字符串操做

2.3.2 保留搜索条件

保留搜索条件的逻辑