16 分页器

添加新博客 编辑本博客

yuan先生博客

from django.core.paginator import Paginator

属性:

  • paginator.count:数据总数
  • paginator.num_pages:总页数
  • paginator.page_range:页码的列表
def index(request):
    book_list=Book.objects.all()
    paginator=Paginator(book_list,20)
    print(paginator.count)
    print(paginator.num_pages)
    print(paginator.page_range)
    return render(request,'index.html',{"book_list":book_list})
View Code

 获取指定页的数据

paginator.page(3)

属性:

  • object_list:指定页内容列表
  • has_next():是否有下一页
  • next_page_number():下一页页码
  • has_previous():是否有上一页
  • previous_page_number():上一页页码

获取指定页数据的具体项

    #拿去第三页的数据
    page3=paginator.page(3)
    #获取page3中的所有数据
    book_list=page3.object_list
    #也可以通过迭代显示数据
    for i in page3:
        print(i)
View Code

 通过URL参数获取指定页

current_page=int(request.GET.get("page",1))
current_page=paginator.page(current_page)
return render(request,'index.html',{"current_page":current_page})
View Code

查询的数据不存在时处理方法,通过EmptyPage来抓取并处理

from django.core.paginator import Paginator,EmptyPage
try:
    current_page=paginator.page(current_page)
except EmptyPage:
    #超出查询范围,返回第一页数据
    current_page = paginator.page(1)
View Code

分页器显示

动态展示分页后的内容,点击某页动态添加class样式

view内容

def index(request):
    """
    #数据批量导入
    book_list=[]
    for i in range(1000):
        book=Book(title="book_%s" % i,price=i*i)
        book_list.append(book)
    Book.objects.bulk_create(book_list)
    """
    book_list=Book.objects.all()
    paginator=Paginator(book_list,40)
    # print(paginator.count)
    # print(paginator.num_pages)
    # print(paginator.page_range)
    #拿去第三页的数据
    page3=paginator.page(3)
    #获取page3中的所有数据
    book_list=page3.object_list
    #也可以通过迭代显示数据
    for i in page3:
        #print(i)
        pass
    #当前第N页
    current_page=int(request.GET.get("page",1))
    try:
        #当前页具体内容
        current_page_list=paginator.page(current_page)
    except EmptyPage:
        current_page_list = paginator.page(1)
    return render(request,'index.html',{"current_page_list":current_page_list,"page_range":paginator.page_range,'current_page':current_page})
View Code

html内容

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">上一页</span>
      </a>
    </li>
      {% for item in page_range %}
          {% if current_page == item %}
              <li class="active"><a href="?page={{ item }}">{{ item }}</a></li>
          {% endif %}
          <li class=""><a href="?page={{ item }}">{{ item }}</a></li>
      {% endfor %}
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">下一页</span>
      </a>
    </li>
  </ul>
</nav>
View Code

 另一种方法显示页码,第一页后禁用“上一页”按钮

前端html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页器</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
</head>
<body>
<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.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 item in page_range %}
          {% if current_page_num == item %}
              <li class="active"><a href="?page={{ item }}">{{ item }}</a></li>
          {% else %}
            <li class=""><a href="?page={{ item }}">{{ item }}</a></li>
          {% endif %}
      {% endfor %}

    {% 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 %}

  </ul>
</nav>
</body>
<script type="javascript"></script>
</html>
View Code

后端view内容

current_page_num=int(request.GET.get("page",1))
    try:
        #当前页具体内容
        current_page=paginator.page(current_page_num)
    except EmptyPage:
        current_page = paginator.page(1)
    has_previous=current_page.has_previous()
    has_next=current_page.has_next()

    return render(request,'index.html',{"has_previous":has_previous,"has_next":has_next,"current_page":current_page,"page_range":paginator.page_range,"current_page_num":current_page_num,"previous_page_number":current_page.previous_page_number})
View Code

分页太多,不全部展示

处理page_range,即需要展示的页码不再是paginator.page_range,而是通过条件对其分段

view代码

    current_page_num=int(request.GET.get("page",1))
    if paginator.num_pages>11:
        if current_page_num-5 <=1 :
            page_range=range(1,11)
        elif current_page_num+5>paginator.num_pages:
            page_range=range(paginator.num_pages-11,paginator.num_pages+1)
        else:
            page_range=range(current_page_num-5,current_page_num+6)
    else:
        page_range=paginator.page_range
View Code

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页器</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
</head>
<body>
<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.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 item in page_range %}
          {% if current_page_num == item %}
              <li class="active"><a href="?page={{ item }}">{{ item }}</a></li>
          {% else %}
            <li class=""><a href="?page={{ item }}">{{ item }}</a></li>
          {% endif %}
      {% endfor %}

    {% 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 %}

  </ul>
</nav>
</body>
<script type="javascript"></script>
</html>
View Code

 

posted @ 2018-07-17 21:53  丫丫625202  阅读(125)  评论(0编辑  收藏  举报