Django - 分页器

1 、批量数据导入

建立Django项目：pageDemo

modles

from django.db import models

class Book(models.Model):
    id = models.AutoField(primary_key=True)
    title = models.CharField(max_length=32)
    price = models.DecimalField(max_digits=8, decimal_places=2)

数据库迁移

python manage.py makemigrations
python manage.py migrate

批量导入数据

def index(request):
    # 批量生成数据

    # 方式一
    # for i in range(100):
    #     Book.objects.create(title='book_%s'%i,price=i*i)
    
　　#方式二
    book_list = []
    for i in range(100):
        book_obj = Book(title="book_%s" % i, price=i * i)
        book_list.append(book_obj)

    Book.objects.bulk_create(book_list)  # 批量导入

    return render(request,'index.html')

对数据库的批量数据进行展示：

def index(request):
    '''
    # 批量生成数据
    # 方式一
    # for i in range(100):
    #     Book.objects.create(title='book_%s'%i,price=i*i)

    book_list = []
    for i in range(100):
        book_obj = Book(title="book_%s" % i, price=i * i)
        book_list.append(book_obj)

    Book.objects.bulk_create(book_list)  # 批量导入
    '''
    book_list=Book.objects.all()
    return render(request,'index.html',{'book_list':book_list})

index.html

<body>
    <ul>
        {% for book in book_list %}
        <li>
            {{ book.title }}:{{ book.price }}
        </li>
        {% endfor %}
    </ul>
</body>
运行结果：

数据过多在一个页面展

2、分页器的使用

2.1、静态显示页码

#导入分页器

from django.core.paginator import Paginator
def index(request):
    book_list=Book.objects.all()
    # 分页器  1.对谁做分页, 每页几条数据
    paginator=Paginator(book_list,10)

print("count:", paginator.count)  # 数据总数
    print("num_pages", paginator.num_pages)  # 总页数
    print("page_range", paginator.page_range)  # 页码的列表# 显示某一页的具体方式： 

    page1=paginator.page(1)
    # 方式一
    print('page1.object_list',page1.object_list)

    # 方式二
    for i in page1:
        print(i)
    return render(request,'index.html',{'book_list':book_list})

2.2 动态获取当前页码

views.py

from django.core.paginator import Paginator,EmptyPage
def index(request):
    book_list=Book.objects.all()
    # 分页器  1.对谁做分页, 每页几条数据
    paginator=Paginator(book_list,10)
    print("count:", paginator.count)  # 数据总数
    print("num_pages", paginator.num_pages)  # 总页数
    print("page_range", paginator.page_range)  # 页码的列表
 
    # 方式2：动态获取当前页码num

    print(request.GET)  # http://127.0.0.1:8000/app01/index/?page=1
    current_page_num = int(request.GET.get("page"))  # 1   <QueryDict: {'page': ['2']}>
    current_page = paginator.page(current_page_num) # 当前num页码的page对象
    return render(request, 'index.html', locals())

index.html

      <ul>
        {% for book in current_page %}
        <li>
            {{ book.title }}:{{ book.price }}
        </li>
        {% endfor %}
    </ul>

运行结果：手动输入分页页码：page=1；page=2

小问题，当页码不再范围内处理

    try:
        print(request.GET)  # http://127.0.0.1:8000/app01/index/?page=1
        current_page_num = int(request.GET.get("page"))  # 1   <QueryDict: {'page': ['2']}>
        current_page = paginator.page(current_page_num) # 当前num页码的page对象
    except EmptyPage as e:
        current_page = paginator.page(1)# 认为设定，不再范围内显示第一页内容
    return render(request, 'index.html', locals())

引入Bootstrap

css样式引入：

<!-- 最新版本的 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">

分页引入：

默认分页

受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

分页模板

点击分页显示不同的页面内容

效果图

views.py代码不变

from django.shortcuts import render

# Create your views here.
from .models import Book

#导入分页器
from django.core.paginator import Paginator,EmptyPage
def index(request):
    '''
    # 批量生成数据
    # 方式一
    # for i in range(100):
    #     Book.objects.create(title='book_%s'%i,price=i*i)

    book_list = []
    for i in range(100):
        book_obj = Book(title="book_%s" % i, price=i * i)
        book_list.append(book_obj)

    Book.objects.bulk_create(book_list)  # 批量导入
    return render(request,'index.html',{'book_list':book_list})
    '''
    book_list=Book.objects.all()
    # 分页器  1.对谁做分页, 每页几条数据
    paginator=Paginator(book_list,10)
    print("count:", paginator.count)  # 数据总数
    print("num_pages", paginator.num_pages)  # 总页数
    print("page_range", paginator.page_range)  # 页码的列表
    """
    # 显示某一页的具体方式：
    page1=paginator.page(1)
    # 方式一
    print('page1.object_list',page1.object_list)
    # 方式二
    for i in page1:
        print(i)
    return render(request,'index.html',{'book_list':book_list})
    """
    # 方式2：动态获取当前页码num
    try:
        print(request.GET)  # http://127.0.0.1:8000/app01/index/?page=1
        current_page_num = int(request.GET.get("page"))  # 1   <QueryDict: {'page': ['2']}>
        print(current_page_num)
        current_page = paginator.page(current_page_num) # 当前num页码的page对象
        print(current_page,type(current_page))
    except EmptyPage as e:
        current_page = paginator.page(1)
    return render(request, 'index.html', locals())

View Code

html代码

<!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>
{#    <ul>#}
{#        {% for book in book_list %}#}
{#        <li>#}
{#            {{ book.title }}:{{ book.price }}#}
{#        </li>#}
{#        {% endfor %}#}
{#    </ul>#}

      <ul>
        {% for book in current_page %}
        <li>
            {{ book.title }}:{{ book.price }}
        </li>
        {% endfor %}
    </ul>

    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">上一页</span>
          </a>
        </li>


        {%  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 %}
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">下一页</span>
          </a>
        </li>

      </ul>
    </nav>


</body>
</html>

View Code

引入bootstarp翻页

用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

设置add+1 add-1

小问题但点击上下页超出范围解决

view视图代码

  try:
        print(current_page.has_previous())  # 是否有上一页
        print(current_page.previous_page_number())  # 上一页的页码

        print(current_page.has_next())  # 是否有下一页
        print(current_page.next_page_number())  # 下一页的页码
    except EmptyPage as e:
        pass

from django.shortcuts import render
from app01.models import Book
from django.core.paginator import Paginator, EmptyPage   # 分页器


def index(request):
    # 添加100条书籍数据
    # 方式1：
    # for i in range(100):
    #     Book.objects.create(title='book_%s' % i, price=i*i)

    # 方式2：生成100个实例对象，创建效率高
    # book_list = []
    # for i in range(100):
    #     book_obj = Book(title="book_%s" % i, price=i*i)
    #     book_list.append(book_obj)
    #
    # Book.objects.bulk_create(book_list)  # 批量导入
    #
    book_list = Book.objects.all()

    # 分页器的使用

    # 1.对谁做分页, 每页几条数据
    paginator = Paginator(book_list, 12)        # 对book_list数据分页，每页10条数据

    print('count:', paginator.count)            # 数据总个数  100
    print('num_page:', paginator.num_pages)     # 总页数      9
    print('per_page', paginator.per_page)       # 每页显示条目数量   12
    print('page_range', paginator.page_range)   # 页码的列表   range(1, 10)
    print('page', paginator.page)               # page对象    <django.core.paginator.Paginator object at 0x0412EAF0>

    # 2.显示某一页的具体数据的两种方法
    # 方式1：固定页码num
    page1 = paginator.page(1)                   # 获取第1页的page对象
    print("object_list", page1.object_list)     # page的object_list属性
    for item in page1:                          # for打印每条数据对象
        print(item)

    # 方式2：动态获取当前页码num
    # print(request.GET)  # http://127.0.0.1:8000/app01/index/?page=1
    # current_page_num = int(request.GET.get("page", '1'))  # 1    # <QueryDict: {'page': ['2']}>
    # current_page = paginator.page(current_page_num)

    # 3.抛出Empty异常
    try:
        print(request.GET)  # http://127.0.0.1:8000/app01/index/?page=1
        current_page_num = int(request.GET.get("page", '1'))  # 1    # <QueryDict: {'page': ['2']}>
        current_page = paginator.page(current_page_num)
    except EmptyPage as e:
        current_page = paginator.page(1)
    except ValueError as e:
        current_page = paginator.page(1)

    # 4.上一页，下一页
    try:
        print(current_page.has_previous())             # 是否有上一页
        print(current_page.previous_page_number())     # 上一页的页码

        print(current_page.has_next())                  # 是否有下一页
        print(current_page.next_page_number())          # 下一页的页码
    except EmptyPage as e:
        pass

    """
    if 当前page对象有 上一页
        <a href="?page={{ current_page.previous_page_number }}">
    else：
        <a href="">
    """

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

view.py

html

# 上一页
        {% if current_page.has_previous %}
            <li>
                <a href="?page={{ current_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 %}

# 下一页
        {% 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 %}

<!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>
{#    <ul>#}
{#        {% for book in book_list %}#}
{#        <li>#}
{#            {{ book.title }}:{{ book.price }}#}
{#        </li>#}
{#        {% endfor %}#}
{#    </ul>#}

      <ul>
        {% for book in current_page %}
        <li>
            {{ book.title }}:{{ book.price }}
        </li>
        {% endfor %}
    </ul>

    <nav aria-label="Page navigation">
      <ul class="pagination">
{#      判断处理#}
      {% if current_page.has_previous %}
            <li >
              <a href="?page={{ current_page_num|add:-1 }}" 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 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 %}

        {% if current_page.has_next %}
            <li >
              <a href="?page={{ current_page_num|add:1}}" 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>

index.html

页码非常多问题处理

左边中间右边显示

100个数据，

假设只所分配的页码大于11个页码，

左边：当当前页码减去5<1则允许1-12的页码出现

右边：当前页码加5大于页码总数显示范围(x-10,x+1)总共有11个页码

处于：中间时显示左5，右5

如果分组小于11：

直接显示所有页码

 # 分页器  1.对谁做分页, 每页几条数据
    paginator=Paginator(book_list,20)

总体代码如下：

from django.shortcuts import render

# Create your views here.
from .models import Book

#导入分页器
from django.core.paginator import Paginator,EmptyPage
def index(request):
    '''
    # 批量生成数据
    # 方式一
    # for i in range(100):
    #     Book.objects.create(title='book_%s'%i,price=i*i)

    book_list = []
    for i in range(100):
        book_obj = Book(title="book_%s" % i, price=i * i)
        book_list.append(book_obj)

    Book.objects.bulk_create(book_list)  # 批量导入
    return render(request,'index.html',{'book_list':book_list})
    '''
    book_list=Book.objects.all()
    # 分页器  1.对谁做分页, 每页几条数据
    paginator=Paginator(book_list,3)
    print("count:", paginator.count)  # 数据总数
    print("num_pages", paginator.num_pages)  # 总页数
    print("page_range", paginator.page_range)  # 页码的列表
    """
    # 显示某一页的具体方式：
    page1=paginator.page(1)
    # 方式一
    print('page1.object_list',page1.object_list)
    # 方式二
    for i in page1:
        print(i)
    return render(request,'index.html',{'book_list':book_list})
    """


    # 方式2：动态获取当前页码num
    try:
        print(request.GET)  # http://127.0.0.1:8000/app01/index/?page=1
        current_page_num = int(request.GET.get("page"))  # 1   <QueryDict: {'page': ['2']}>
        print(current_page_num)
        current_page = paginator.page(current_page_num) # 当前num页码的page对象
        print(current_page,type(current_page))
    except EmptyPage as e:
        current_page = paginator.page(1)

    # 如果只允许出现11个页码
    current_page_num = int(request.GET.get("page"))
    if paginator.num_pages > 11:
        if (current_page_num-5)<1:
            page_range=range(1,12)
        elif current_page_num+5>paginator.num_pages:
            page_range=range(paginator.num_pages-10,paginator.num_pages+1)
        else:
            page_range=range(current_page_num-5,current_page_num+6)
    else:
        page_range = paginator.page_range

    # 4.上一页，下一页
    try:
        print(current_page.has_previous())  # 是否有上一页
        print(current_page.previous_page_number())  # 上一页的页码

        print(current_page.has_next())  # 是否有下一页
        print(current_page.next_page_number())  # 下一页的页码
    except EmptyPage as e:
        pass


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

views.py

<!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>
{#    <ul>#}
{#        {% for book in book_list %}#}
{#        <li>#}
{#            {{ book.title }}:{{ book.price }}#}
{#        </li>#}
{#        {% endfor %}#}
{#    </ul>#}

      <ul>
        {% for book in current_page %}
        <li>
            {{ book.title }}:{{ book.price }}
        </li>
        {% endfor %}
    </ul>

    <nav aria-label="Page navigation">
      <ul class="pagination">
        {#-----判断处理------#}
      {% if current_page.has_previous %}
            <li >
              <a href="?page={{ current_page_num|add:-1 }}" 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 item in 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 %}

          {#-----判断处理------#}
        {% if current_page.has_next %}
            <li >
              <a href="?page={{ current_page_num|add:1}}" 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>

模板层

posted on 2018-11-16 21:54 foremost 阅读(155) 评论(0) 编辑收藏举报

Django - 分页器

1 、批量数据导入

2、分页器的使用

2.1、静态显示页码

2.2 动态获取当前页码

点击分页显示不同的页面内容

上一页 下一页功能实现

页码非常多问题处理

上一页下一页功能实现