【11.0补充】分页器推导

【1.0】基础版

• 后端

def ab_many(request):

    # 分页操作 推导

    # （1） 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
    # （2） 分页操作
    # 想访问的页数
    current_page = request.GET.get('page', 1)  # 如果获取不到当前页码就展示第一页
    # 异常捕获
    try:
        current_page = int(current_page)
    except Exception:
        current_page = 1
    # 每页展示多少条
    per_page_num = 10
    # 起始位置
    start_page = (current_page - 1) * per_page_num
    # 终止位置
    end_page = current_page * per_page_num
    # 切片
    book_queryset = models.Book.objects.all()[start_page:end_page]
    '''
    start_page = (current_page-1) * per_page_num
    end_page = current_page * per_page_num
    '''
    return render(request, 'ab_many.html', locals())

• 前端

{% for book_obj in book_queryset %}
    <p>{{ book_obj.title }}</p>
{% endfor %}

• 方式

通过在 url 后面携带参数，完成分页操作
http://127.0.0.1:8000/ab_many/?page=3

但是这种当时方式，没有对前端页面进行优化，仅仅只是后端部分完成了分页

【2.0】分页器组件

• 参考bootstrap官方文档，拷贝分页器代码进行优化

<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>

• 优化后代码

{% for book_obj in book_queryset %}
    <p>{{ book_obj.title }}</p>
{% endfor %}

<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="?page=1">1</a></li>
        <li><a href="?page=2">2</a></li>
        <li><a href="?page=3">3</a></li>
        <li><a href="?page=4">4</a></li>
        <li><a href="?page=5">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

• 效果
  • 通过点击底部的页码也已进行指定的分页

缺点：数据页数只能指定，无法展示全部数据

【3.0】优化分页

• 总数据 100 条

  • 每一页 10 条
    • 需要 10 页

• 总数据 99 条

  • 每一页 10 条
    • 需要 10 页

• 总数据 101 条

  • 每一页 10 条
    • 需要 11 页

如何动态的计算出需要多少页？

• 后端

def ab_many(request):

    # 分页操作 推导

    # （1） 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
    # （2） 分页操作
    # 书籍对象
    book_query = models.Book.objects.all()
    # 想访问的页数
    current_page = request.GET.get('page', 1)  # 如果获取不到当前页码就展示第一页
    # 异常捕获
    try:
        current_page = int(current_page)
    except Exception:
        current_page = 1
    # 每页展示多少条
    per_page_num = 10
    # 动态计算出需要的总页数
    all_count = book_query.count()
    # 计算总数
    page_count, more = divmod(all_count, per_page_num)
    if more:
        page_count += 1

    page_html = ''
    # 前端动态页面展示 - 后端写好页面传给前端
    for count in range(1, page_count + 1):
        page_html += f'<li><a href="?page={count}">{count}</a></li>'

    # 起始位置
    start_page = (current_page - 1) * per_page_num
    # 终止位置
    end_page = current_page * per_page_num
    # 切片
    book_queryset = book_query[start_page:end_page]
    '''
    start_page = (current_page-1) * per_page_num
    end_page = current_page * per_page_num
    '''
    return render(request, 'ab_many.html', locals())

• 前端

{% for book_obj in book_queryset %}
    <p>{{ book_obj.title }}</p>
{% endfor %}

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {# 前段转义 - 将后端的html页面进行转义，转为前端页码/也可以后端做这件事  #}
        {{ page_html|safe }}
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

完成了分页操作的雏形，但是问题是前端页面展示的页码过于繁多

【4.0】迭代 - 美化分页器

• 在制作页码个数的时候，一般情况下是奇数个
  • 符合中国人的审美

def ab_many(request):

    # 分页操作 推导

    # （1） 支持切片models.Book.objects.all()[1:20] --- 展示前20条数据
    # （2） 分页操作
    # 书籍对象
    book_query = models.Book.objects.all()
    # 想访问的页数
    current_page = request.GET.get('page', 1)  # 如果获取不到当前页码就展示第一页
    # 异常捕获
    try:
        current_page = int(current_page)
    except Exception:
        current_page = 1
    # 每页展示多少条
    per_page_num = 10
    # 动态计算出需要的总页数
    all_count = book_query.count()
    # 计算总数
    page_count, more = divmod(all_count, per_page_num)
    if more:
        page_count += 1

    # 纠正左侧负数页的问题
    left_page_count = current_page
    if current_page < 6:
        current_page = 6
    page_html = ''
    # 前端动态页面展示 - 后端写好页面传给前端
    for count in range(current_page - 5, current_page + 6):
        if left_page_count == count:
            # 第一页高亮显示
            page_html += f'<li class="active"><a href="?page={count}" >{count}</a></li>'
        else:
            page_html += f'<li><a href="?page={count}" >{count}</a></li>'
    # 起始位置
    start_page = (current_page - 1) * per_page_num
    # 终止位置
    end_page = current_page * per_page_num
    # 切片
    book_queryset = book_query[start_page:end_page]
    '''
    start_page = (current_page-1) * per_page_num
    end_page = current_page * per_page_num
    '''
    return render(request, 'ab_many.html', locals())

• 前端

{% for book_obj in book_queryset %}
    <p>{{ book_obj.title }}</p>
{% endfor %}

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {# 前段转义 - 将后端的html页面进行转义，转为前端页码/也可以后端做这件事  #}
        {{ page_html|safe }}
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>