zoukankan      html  css  js  c++  java
  • Django框架(十四)—— Django分页组件

    Django分页组件

    一、分页器

    数据量大的话,可以分页获取,查看

    例如:图书管理中,如果有成千上万本书,要是都在一个页面中渲染出来,会影响页面美观,所以就要用分页器分页渲染

    二、分页器的使用

    基本写法

    基本写法:
        后端:
            总数据拿出来
            生成分页器Paginator对象(对象里有属性和方法)
            生成当前页的对象,current_page=paginator.page(当前页码)
            取出前台传过来的页码,current_page_num = int(request.GET.get('page'))
                -需要有异常捕获
                -捕获到,把当前页码设置成第一页
        
        
        前端:
            -for循环总页列表
            -点某一页,跳到指定页码,<li><a href="/index/?page={{ foo }}">{{ foo }}</a></li>
            
            -上一页,下一页的处理:需要有判断,判断是否有上一页,下一页
            # 判断总页码数是否大于11,不大于11,走else:把总页码数,赋给page_range(前端循环页码列表,循环的就是page_range)
                if paginator.num_pages >11:
                    # 当前页码数-5大于1的时候,page_range应该是,page_range就是1到11页?
                    if current_page_num-5<1:
                        page_range=range(1,12)
                    elif current_page_num+5>paginator.num_pages:
                        # 当前页码数+5大于总页码数,总页码-10,到总页码+1之间
                        page_range=range(paginator.num_pages-10,paginator.num_pages+1)
                    else:
                        #其他情况,左5,右6推算,也就是:range(current_page_num - 5, current_page_num + 6)
                        page_range = range(current_page_num - 5, current_page_num + 6)
                else:
                    #小于11,有多少页,就显示多少页
                    page_range=paginator.page_range
    from django.core.paginator import Paginator
    
    # 对象参数
    1. Paginator对象:    paginator = Paginator(user_list, 10)
    # per_page: 每页显示条目数量
    
    
    # count:    数据总个数
    count = paginator.count
    
    # num_pages:总页数,它是一个对象的方法,通过装饰器伪装成对象属性
    page_num = paginator.num_pages
    
    # page_range:总页数的索引范围,如: (1,10),(1,200)
    PageRange = paginator.page_range
    
    # page:     page对象,传一个数字,假如你想取到第1页,就传1进去,会返回一个page对象,这个对象里是当前页的一些对象
    page_obj = paginator.page(1)
    
    2. page对象:page=paginator.page(1)
    # has_next              是否有下一页,它的返回值是一个布尔类型
    page.has_next()
    
    # next_page_number      下一页页码,它的返回值是一个int类型
    page.next_page_number()
    
    # has_previous          是否有上一页,它的返回值是一个布尔类型
    page.has_previous()
    
    # previous_page_number  上一页页码,它的返回值是一个int类型
    page.has_previous()
    
    # object_list           分页之后的数据列表
    page.object_list()
    
    # number                当前页
    page.number()
    
    # paginator             paginator对象

    三、案例

    1、模板层

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- 最新版本的 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">
        <title>Title</title>
    </head>
    <body>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
    
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>书名</th>
                    <th>价格</th>
                </tr>
                </thead>
                <tbody>
                {% for book in current_page %}
                    <tr>
                        <td>{{ book.name }}</td>
                        <td>{{ book.price }}</td>
                    </tr>
                {% endfor %}
    
                </tbody>
            </table>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    {% if current_page.has_previous %}
                        <li>                       
                            <a href="/index/?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 foo in page_range %}
                        {% if current_page_num == foo %}
                            {# 当前页码等于循环到的页码数,变色#}
                            <li class="active"><a href="/index/?page={{ foo }}">{{ foo }}</a></li>
                        {% else %}
                            <li><a href="?page={{ foo }}">{{ foo }}</a></li>
                        {% endif %}
                    {% endfor %}
    
    
                    {% if current_page.has_next %}
                        <li>
                            {#                    <a href="/index/?page={{ current_page_num|add:1 }}" aria-label="Next">#}
                            <a href="/index/?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>
        </div>
    
    </div>
    </body>
    </html>

    2、视图层

    def index(request):
        book_list = models.Book.objects.all()
        paginator = Paginator(book_list, 3)
        # 如果页码数多,让它显示前5,后5,中间是当前在的页码
        try:
    
            current_page_num = int(request.GET.get('page'))
            current_page = paginator.page(current_page_num)
            print(current_page.object_list)
            # 总页码数,大于11的时候
            if paginator.num_pages >11:
                # 当前页码数-5大于1的时候,page_range应该是?
                if current_page_num-5<1:
                    page_range=range(1,12)
                elif current_page_num+5>paginator.num_pages:
                    #     当前页码数+5大于总页码数,总页码数往前推11个
                    page_range=range(paginator.num_pages-10,paginator.num_pages+1)
                else:
                    page_range = range(current_page_num - 5, current_page_num + 6)
            else:
                #小于11,有多少页,就显示多少页
                page_range=paginator.page_range
        except Exception as e:
            current_page_num = 1
            current_page = paginator.page(current_page_num)
    
        return render(request, 'index_next.html', locals())
  • 相关阅读:
    生产环境之Nginx高可用方案
    MySQL主从同步配置
    SpringBoot整合MyBatisPlus配置动态数据源
    循环有序数组,查找值
    数组任意取三个数中乘积最大值
    多线程输出123以及有序输出1-75
    有序数组取中值
    RocketMQ原理及源码解析
    docker基础常用命令
    项目常用命令
  • 原文地址:https://www.cnblogs.com/zhuzhiwei-2019/p/10779161.html
Copyright © 2011-2022 走看看