【Django】教程-7-分页，默认使用django的

【Django】教程-1-安装+创建项目+目录结构介绍
【Django】教程-2-前端-目录结构介绍
【Django】教程-3-数据库相关介绍
【Django】教程-4-一个增删改查的Demo
【Django】教程-5-ModelForm增删改查+规则校验【正则+钩子函数】
【Django】教程-6-搜索框-条件查询前后端

13. 分页

使用django自带分页，以下 分页方式，支持多数场景。
也支持带条件框分页场景

# 用户列表
def user_list(req):
    """用户展示"""
    # select * from userinfo order by name asc; -name 倒序
    # user_list = UserInfo.objects.all().order_by("-name")

    data_dict = {}
    query_name = req.GET.get("query_name", "") # 第二个值是默认值, 也可以写if判断
    if query_name:
        data_dict["name__contains"] = query_name
    user_list = UserInfo.objects.filter(**data_dict).order_by("-name")

    # 创建 Paginator 对象，每页显示 10 条记录
    paginator = Paginator(user_list, 10)
    # 获取当前页码，默认为第 1 页
    page_number = req.GET.get('page')
    # 获取当前页的数据
    page_obj = paginator.get_page(page_number)


    return render(req, 'user/user_list.html', {"search_data": query_name,'page_obj': page_obj})

{% extends 'layout.html' %}

{% block content %}

    <div class="container">
        <div style="float: right;width: 300px;">
            <form method="get">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索" name="query_name"
                           value="{{ search_data }}"/>
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="submit">查询</button>
                </span>
                </div>
            </form>
        </div>
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/user/add">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                新建用户</a>
        </div>
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/user/modelform/add">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                ModelForm新建用户</a>
        </div>


        <div class="panel panel-default">
            <div class="panel-heading"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>用户列表
            </div>

            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>#</th>
                    <th>姓名</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>创建时间</th>
                    <th>性别</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for i in page_obj %}
                    <tr>
                        <td>{{ i.id }}</td>
                        <td>{{ i.name }}</td>
                        <td class="password-cell">{{ i.password }}</td>
                        <td>{{ i.age }}</td>
                        <td>
                            {% if i.depart %}
                                {{ i.depart.title }}
                            {% endif %}

                        </td>
                        <td>{{ i.create_time|date:"Y-m-d H:i:s" }}</td>
                        <td>{{ i.get_gender_display }}</td>
                        <td>{{ i.get_status_display }}</td>
                        <td>
                            <a class="btn btn-primary btn-xs" href="/user/update/{{ i.id }}">编辑</a>
                            <a class="btn btn-primary btn-xs" href="/user/modelform/edit/{{ i.id }}">MF编辑</a>
                            <a class="btn btn-danger  btn-xs" href="/user/del?nid={{ i.id }}">删除</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页导航 -->
        <nav aria-label="分页">
            <ul class="pagination justify-content-center" style="display: flex; flex-wrap: nowrap; align-items: center;">
                <!-- 首页 -->
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1">首页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">首页</span>
                    </li>
                {% endif %}

                <!-- 上一页 -->
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">上一页</span>
                    </li>
                {% endif %}

                <!-- 下拉选择页码 -->
                <li class="page-item" style="margin: 0 5px;">
                    <select class="form-control" onchange="goToPage(this.value)">
                        {% for page_num in page_obj.paginator.page_range %}
                            <option value="{{ page_num }}" {% if page_num == page_obj.number %}selected{% endif %}>
                                第 {{ page_num }} 页
                            </option>
                        {% endfor %}
                    </select>
                </li>

                <!-- 显示当前页码和总页数 -->
                <li class="page-item disabled" aria-current="page" style="margin: 0 5px;">
                    <span class="page-link">共 {{ page_obj.paginator.num_pages }} 页</span>
                </li>

                <!-- 下一页 -->
                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">下一页</span>
                    </li>
                {% endif %}

                <!-- 尾页 -->
                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">尾页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">尾页</span>
                    </li>
                {% endif %}
            </ul>
        </nav>

    </div>

    <script>
        const passwordCells = document.querySelectorAll('.password-cell');
        passwordCells.forEach(cell => {
            const password = cell.textContent;
            const maskedPassword = '*'.repeat(password.length);
            cell.textContent = maskedPassword;
        });

        function goToPage(page) {
            const searchParams = new URLSearchParams(window.location.search);
            searchParams.set('page', page);
            const newUrl = window.location.pathname + '?' + searchParams.toString();
            window.location.href = newUrl;
        }
    </script>

{% endblock %}

效果图：