Python Django Web开发——内置分页器的学习以及使用Bootstrap的分页器美化前端显示

最新推荐文章于 2022-11-30 17:16:40 发布

等。。

最新推荐文章于 2022-11-30 17:16:40 发布

阅读量584

点赞数

分类专栏： pycharm Django 文章标签： django 前端 python

本文链接：https://blog.youkuaiyun.com/weixin_44048169/article/details/121453810

版权

Django 同时被 2 个专栏收录

46 篇文章

订阅专栏

pycharm

26 篇文章

订阅专栏

Django 内置的分页器功能 Paginator 非常容易实现数据的分页显示，及对应的控制

先不使用Paginator，自己造一个分页器，主要利用的是数据库查询的数据集的切片。

def get_students(request):
    # 用数据库分页方法实现分页展示
    # http://127.0.0.1:8000/app/getstudents/?page=4&perpage=10，用这个?page=4&perpage=10传递参数
    # 如果没有获取到参数，则设置默认值第1页，每页数量10条
    page=int(request.GET.get('page',1))
    per_page=int(request.GET.get('perpage',10))
    students=Students.objects.all()[per_page*(page-1):per_page*page]
    # students=Students.objects.all()
    data={
        'students':students,
    }
    return render(request,'students.html',context=data)

<h1>学生列表</h1>
<ul>
    {% for student in students %}
        <li>{{ student.s_name }}-年龄是-{{ student.s_age }}</li>
    {% endfor %}

</ul>

使用自带的分页器Paginator 功能

# 用Django自带的分页器功能实现分页
def get_students_with_page(request):
    page=int(request.GET.get('page',1))
    per_page=int(request.GET.get('perpage',10))
    students=Students.objects.all()
    paginator=Paginator(students,per_page)
    page_object=paginator.page(page)
    data={
        'object_list':page_object,
        'page_list':paginator.page_range,
    }
    return render(request,'get_students_with_page.html',context=data)

前端的代码附加bootstrap优化显示效果，其中使用 Paginator 的属性

number
object_list
page_range
previous_page_number
next_page_number
has_previous
has_next
其中 has_previous 和has_next 用在分页器的首尾判断是否存在，避免超出范围报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    {#    注意 bootstrap和  jquery 不是版本越高越好，要考虑浏览器的版本问题  #}
    {#    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">#}
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    {#    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.js"></script>#}
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript"
            src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.js"></script>

</head>
<body>


<h1>学生列表</h1>
<ul>
    {% for object in object_list.object_list %}
        <li>{{ object.s_name }}------{{ object.s_age }}</li>

    {% endfor %}

</ul>
<h2>用paginator实现点击页面跳转到对应的页面内容</h2>
<ul>
    {% for page in page_list %}
        {#        <a href="/app/getstudentswithpage/?page={{ page }}">{{ page }}</a>#}
        <a href="{% url 'app:get_students_with_page' %}/?page={{ page }}">{{ page }}</a>
    {% endfor %}

</ul>

<nav aria-label="Page navigation">
    <ul class="pagination">
        {#  加入判断是否有上一页，否则到第一页再点上一页就报错了#}
        {% if object_list.has_previous %}
            <li>
                <a href="{% url 'app:get_students_with_page' %}?page={{ object_list.previous_page_number }}"
                   aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% else %}
            <li class="previous disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% endif %}


        {% for page in page_list %}
            {#        将当前选中的页码在前端加亮#}
            {% ifequal page object_list.number %}
                {#        <a href="/app/getstudentswithpage/?page={{ page }}">{{ page }}</a>#}
                <li class="active"><a href="{% url 'app:get_students_with_page' %}/?page={{ page }}">{{ page }}</a></li>
            {% else %}
                <li><a href="{% url 'app:get_students_with_page' %}/?page={{ page }}">{{ page }}</a></li>
            {% endifequal %}
        {% endfor %}
        {% if object_list.has_next %}
            <li>
                <a href="{% url 'app:get_students_with_page' %}?page={{ object_list.next_page_number }}"
                   aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% endif %}

    </ul>
</nav>


</body>
</html>