案例:员工管理系统(分页)

一 . 在views.py的pretty_list函数中添加分页代码

def pretty_list(request):
    """ 靓号列表 """
    # for i in range(300):  # 增加号码测试用
    #     models.PrettyNum.objects.create(mobile="1818888818",price=10,status=1)

    data_dict = {}  # 装查询结果的字典
    search_data = request.GET.get('q', "")  # 获取GET提交的关键字
    if search_data:  # 如果传了关键字
        data_dict["mobile__contains"] = search_data  # 才能往字典里传这个值

    # 1 根据用户要访问的页码计算出起止位置
    page = int(request.GET.get('page', 1))  # 2 获取当前页面 默认第一页
    page_size = 10  # 每页显示多少数据
    start = (page - 1) * page_size  # 2 计算开始值
    end = page * page_size  # 2 结束值

    # 2 总页码
    queryset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]  # 没有传就获取所有的值, [start:end]=规定取值范围

    # 3 计算有多少条数据
    total_count = models.PrettyNum.objects.filter(**data_dict).order_by("-level").count()  # 2 计算有多少条数据

    # 4 计算总页码
    total_page_count, div = divmod(total_count, page_size)  # 3 (总数/每页条数)
    if div:
        total_page_count += 1

    # 5 计算出当前页的前5页和后五页
    plus = 5
    if total_page_count <= 2 * plus + 1:  # 数据库数据比较少没达到11页
        start_page = 1  # 固定开始值
        end_page = total_page_count + 1  # 总页数+1  固定结束值

    else:  # 数据比较多 > 11
        if page <= plus:  # 当前页<5(小极值)
            start_page = 1
            end_page = 2 * plus + 1 + 1  # 总页数+1
        else:  # 当前页>5(大极值)
            if (page + plus) > total_page_count:
                start_page = total_page_count - 2 * plus
                end_page = total_page_count  # 结束的位子等于总页码
            else:
                start_page = page - plus
                end_page = page + plus

    # 页码列表
    page_str_list = []  # 2 页码地址列表

    # 首页
    page_str_list.append('<li><a href="?page={}">首页</a></li>'.format(1))

    # 上一页
    if page < 1:
        prev = '<li><a href="?page={}">上一页</a></li>'.format(page - 1)
    else:
        prev = '<li><a href="?page={}">上一页</a></li>'.format(1)
    page_str_list.append(prev)

    # 6 会显示全部页码
    for i in range(start_page, end_page + 1):
        if i == page:
            ele = '<li class="active"><a href="?page={}">{}</a> </li>'.format(i, i)  # 生成url
        else:
            ele = '<li><a href="?page={}">{}</a> </li>'.format(i,i)  # 2 每次循环相当于生成<li><a href="/pretty/list/?page=2">2</a></li>地址
        page_str_list.append(ele)  # 2 添加到页码地址列表

    # 下一页
    if page < total_page_count:  # 当前页小于总页数
        prev = '<li><a href="?page={}">下一页</a></li>'.format(page + 1)
    else:
        prev = '<li><a href="?page={}">下一页</a></li>'.format(total_page_count)

    page_str_list.append(prev)

    # 尾页
    page_str_list.append('<li><a href="?page={}">尾页</a></li>'.format(total_page_count))

    # 跳转页
    seach_string = """
    <li>
        <!-- 2. 跳转页码 -->
        <form style="float: left;margin-left: 1px" method="get">
            <input name="page"
               style="position:relative;float:left;display: inline-block;width:80px;border-radius:0;"
               type="text" class="form-control"placeholder="页码">

            <button class="btn btn-default" type="submit">跳转</button>
        </form>
    </li>
    """

    page_str_list.append(seach_string)
    page_string = mark_safe("".join(page_str_list))  # 获取页面并转为字符:mark_safe=转为字符

    return render(request, 'pretty_list.html',
                  {"queryset": queryset, "search_date": search_data, "page_string": page_string})  # 返回页面

二. 在preet_list.html文件中添加页码的div

{% extends 'layout.html' %}  <!-- 继承模板 -->

{% block content %}  <!-- django导入语法 -->
    <div class="container">
        <div style="margin-bottom: 10px" class="clearfix">
            <a class="btn btn-success" href="/pretty/add/">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建靓号
            </a>

            <div style="float: right;width: 300px;">  <!-- 搜索框宽300,右飘 -->
                <form method="get">  <!-- 表单提交 -->
                    <div class="input-group">  <!-- name属性="q" -->
                        <input type="text" name="q" class="form-control" placeholder="Search for..."
                               value="{{ search_data }}">  <!-- 把后端获取的值再传入前端以get方式提交 -->
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>  <!-- 加个图标 -->
                        </button>
                      </span>
                    </div>
                </form>
            </div>

        </div>
        <div class="panel panel-default">
            <!-- 面板内容 -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                靓号列表
            </div>

            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>号码</th>
                    <th>价格</th>
                    <th>级别</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <td>{{ obj.mobile }}</td>
                        <td>{{ obj.price }}</td>
                        <td>{{ obj.get_level_display }}</td>
                        <td>{{ obj.get_status_display }}</td>
                        <td>
                            <a class="btn btn-primary btn-xs" href="/pretty/{{ obj.id }}/edit/">编辑</a>
                            <a class="btn btn-danger btn-xs" href="/pretty/{{ obj.id }}/delete/">删除</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="clearfix">  <!-- 2. 页码由后台决定 -->
            <ul class="pagination">
                {{ page_string }}
            </ul>
        </div>

{#        <nav aria-label="...">  <!-- 1. 固定页码只有5页 -->#}
{#            <ul class="pagination">#}
{#                {{ page_string }}#}
{#                <li><a href="/pretty/list/?page=1">1</a></li>  <!-- 构建url地址 -->#}
{#                <li><a href="/pretty/list/?page=2">2</a></li>#}
{#                <li><a href="/pretty/list/?page=3">3</a></li>#}
{#                <li><a href="/pretty/list/?page=4">4</a></li>#}
{#                <li><a href="/pretty/list/?page=5">5</a></li>#}
{#            </ul>#}
{#        </nav>#}
    </div>
{% endblock %}  <!-- 模板结束 -->

三. 效果图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值