zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    MPLS 知识要点1
    ISIS的SSN和SRM标志
    对比ISIS和OSPF
    ISIS帧中继实验
    ISIS 认证实验
    ISIS数据库同步
    ISIS Lab 路由泄露
    ISIS Lab 重分布直连
    32、端口有效范围是多少到多少?
    33、为何需要把 TCP/IP 协议栈分成 5 层(或7层)?开放式回答。
  • 原文地址:https://www.cnblogs.com/yaya625202/p/9326197.html
Copyright © 2011-2022 走看看