• 【Django】开发日报_5_Day：手机号码管理系统（2）

    目录

    1、实现分页功能

     （1）插入测试数据

     （2）制作页码按钮 

     （3） 循环添加页码按钮

    ​（4） 进行改进

    （5）再度升级，计算数据条数和页数

    （6）再升级，限制页码按钮个数

    （7） 再升级，添加跳转功能

    （8）完整代码：

    1、实现分页功能

     （1）插入测试数据

    向列表函数中新建100条数据用于分页测试。

    1. def pretty_list(request):
    2.     """靓号列表"""
    3.     for i in range(100):
    4.         models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)    
    '
    运行

    注意：运行一次便立即注释或删掉，否则每次访问列表页面都会新增。 

    然后实现分页

    1. #分页功能
    2.     #根据用户访问页码计算起始位置
    3.     page = int(request.GET.get("page",1))
    4.     page_size=10
    5.     start = (page - 1) * page_size
    6.     end = page * page_size
    7.     qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]

    完整代码：

    1. def pretty_list(request):
    2.     """靓号列表"""
    3.     # for i in range(100):
    4.     #     models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
    5.  
    6.     #搜索字典
    7.     data_dict={}
    8.     value = request.GET.get("q","")
    9.     if value:
    10.         data_dict["mobile__contains"]=value
    11.     #获取的列表按等级降序排列
    12.     #select * from 表 order by level desc;
    13.     #qureyset = models.PrettyNum.objects.all().order_by("-level")
    14.     #分页功能
    15.     #根据用户访问页码计算起始位置
    16.     page = int(request.GET.get("page",1))
    17.     page_size=10
    18.     start = (page - 1) * page_size
    19.     end = page * page_size
    20.     qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]
    21.  
    22.     return render(request, "pretty_list.html", {"qureyset": qureyset,"value":value})
    '
    运行

    下面就可以通过url传递page参数进行访问了

     

    （2）制作页码按钮 

    进入bootstrap官网，复制粘贴一段分页组件代码

     pretty_list.html

    1. {% extends 'template.html' %}
    2. {% block title_content %}
    3.     靓号列表
    4. {% endblock %}
    5.  
    6. {% block content %}
    7.     <div class="container">
    8.         <div class="panel panel-default">
    9.             
    10.             <div class="panel-heading">
    11.                 <span class="glyphicon glyphicon-th-list" aria-hidden="true">span>
    12.                 靓号列表
    13.             div>
    14.             
    15.             <table class="table table-bordered">
    16.                 <thead>
    17.                 <th>IDth>
    18.                 <th>号码th>
    19.                 <th>价格th>
    20.                 <th>级别th>
    21.                 <th>状态th>
    22.                 <th>操作th>
    23.                 thead>
    24.                 <tbody>
    25.                 {% for qurey in qureyset %}
    26.                     <tr>
    27.                         <th>{{ qurey.id }}th>
    28.                         <td>{{ qurey.mobile }}td>
    29.                         <td>{{ qurey.price }}td>
    30.                         <td>{{ qurey.get_level_display }}td>
    31.                         <td>{{ qurey.get_status_display }}td>
    32.                         <td>
    33.                             <a class="btn btn-primary btn-xs" href="/pretty/{{ qurey.id }}/edit">编辑a>
    34.                             <a class="btn btn-danger btn-xs" href="/pretty/delete/?nid={{ qurey.id }}">删除a>
    35.                         td>
    36.                     tr>
    37.                 {% endfor %}
    38.                 tbody>
    39.             table>
    40.         div>
    41.         
    42.         <div>
    43.             <ul class="pagination">
    44.                 <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«span>a>li>
    45.                 <li><a href="#">1a>li>
    46.                 <li><a href="#">2a>li>
    47.                 <li><a href="#">3a>li>
    48.                 <li><a href="#">4a>li>
    49.                 <li><a href="#">5a>li>
    50.                 <li><a href="#" aria-label="Next"><span aria-hidden="true">»span>a>li>
    51.             ul>
    52.         div>
    53.     div>
    54. {% endblock %}

    手动添加链接实现分页

    1. <div>
    2.             <ul class="pagination">
    3.                 <li><a href="/pretty/list/?page=1">1a>li>
    4.                 <li><a href="/pretty/list/?page=2">2a>li>
    5.                 <li><a href="?page=3">3a>li>
    6.                 <li><a href="?page=4">4a>li>
    7.                 <li><a href="?page=5">5a>li>
    8.             ul>
    9.         div>

    （3） 循环添加页码按钮

    views.py

    1.     #生成页码代码
    2.     """
    3.                 
    4. 1
  • 2
  • 3
  • 4
  • 5
  • ……
  • """
  • page_str_list = []
  • for i in range(1,20):
  • ele = '
  • {}
    • '.format(i,i)
  • page_str_list.append(ele)
  • page_string = "".join(page_str_list)
  • return render(request, "pretty_list.html", {"qureyset": qureyset,"value":value,"page_string":page_string})

    • pretty_list.html 

    2.         <div>
    3.             <ul class="pagination">
    4.                 {{ page_string }}
    5.             ul>
    6.         div>

    页面

    （4） 进行改进

    views.py导入代码

    1. #后端代码安全标记到前端
    2. from django.utils.safestring import mark_safe
     page_string = mark_safe("".join(page_str_list))

    访问页面

    （5）再度升级，计算数据条数和页数

    1. def pretty_list(request):
    2.     """靓号列表"""
    3.     # for i in range(100):
    4.     #     models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
    5.  
    6.     #搜索字典
    7.     data_dict={}
    8.     value = request.GET.get("q","")
    9.     if value:
    10.         data_dict["mobile__contains"]=value
    11.     #获取的列表按等级降序排列
    12.     #select * from 表 order by level desc;
    13.     #qureyset = models.PrettyNum.objects.all().order_by("-level")
    14.     #分页功能
    15.     #根据用户访问页码计算起始位置
    16.     page = int(request.GET.get("page",1))
    17.     page_size=10
    18.     start = (page - 1) * page_size
    19.     end = page * page_size
    20.  
    21.     qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]
    22.     #生成页码代码
    23.     """
    24.                 
    25. 1
    26.                 
    27. 2
    28.                 
    29. 3
    30.                 
    31. 4
    32.                 
    33. 5
    34.                 ……
    35.     """
    36.     #获取数据库中的数据条数
    37.     total_count = models.PrettyNum.objects.filter(**data_dict).order_by("-level").count()
    38.     #总页数
    39.     total_page_count,div = divmod(total_count,page_size)#divmod除法函数，返回值：商，余数
    40.     if div:
    41.         total_page_count += 1
    42.  
    43.     page_str_list = []
    44.     for i in range(1,total_page_count+1):#range前取后不取，所以还要加一
    45.         ele = '
    46. {}
      47. '.format(i,i)
    47.         page_str_list.append(ele)
    48.     page_string = mark_safe("".join(page_str_list))
    49.     return render(request, "pretty_list.html", {"qureyset": qureyset,"value":value,"page_string":page_string})
    '
    运行

    （6）再升级，限制页码按钮个数

    1. def pretty_list(request):
    2.     """靓号列表"""
    3.     # for i in range(100):
    4.     #     models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
    5.  
    6.     # 搜索字典
    7.     data_dict = {}
    8.     value = request.GET.get("q", "")
    9.     if value:
    10.         data_dict["mobile__contains"] = value
    11.     # 获取的列表按等级降序排列
    12.     # select * from 表 order by level desc;
    13.     # qureyset = models.PrettyNum.objects.all().order_by("-level")
    14.     # 分页功能
    15.     # 根据用户访问页码计算起始位置
    16.     page = int(request.GET.get("page", 1))
    17.     page_size = 10
    18.     start = (page - 1) * page_size
    19.     end = page * page_size
    20.  
    21.     qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]
    22.     # 生成页码代码
    23.     """
    24.                 
    25. 1
    26.                 
    27. 2
    28.                 
    29. 3
    30.                 
    31. 4
    32.                 
    33. 5
    34.                 ……
    35.     """
    36.     # 获取数据库中的数据条数
    37.     total_count = models.PrettyNum.objects.filter(**data_dict).order_by("-level").count()
    38.     # 总页数
    39.     total_page_count, div = divmod(total_count, page_size)  # divmod除法函数，返回值：商，余数
    40.     if div:
    41.         total_page_count += 1
    42.     # 设置按钮显示范围
    43.     plus = 5
    44.     if total_page_count <= 2 * plus + 1:
    45.         start_page = 1
    46.         end_page = total_page_coun + 1
    47.     else:
    48.         # 当前页小于5
    49.         if page <= plus:
    50.             start_page = 1
    51.             end_page = 2 * plus + 1
    52.         else:
    53.             if page >= total_page_count:
    54.                 start_page = total_page_count - 2*plus
    55.                 end_page =  total_page_count + 1
    56.             else:
    57.                 start_page = page - plus
    58.                 end_page = page + plus + 1
    59.                 if end_page>=total_page_count+1:
    60.                     end_page=total_page_count+1
    61.     # 页码
    62.     page_str_list = []
    63.     for i in range(start_page, end_page):  # range前取后不取，所以还要加一
    64.         if i == page:  # 当前页显示按钮样式
    65.             ele = '
    66. {}
      67. '.format(i, i)
    67.         else:
    68.             ele = '
    69. {}
      70. '.format(i, i)
    70.         page_str_list.append(ele)
    71.     page_string = mark_safe("".join(page_str_list))
    72.     return render(request, "pretty_list.html", {"qureyset": qureyset, "value": value, "page_string": page_string})
    '
    运行

    （7） 再升级，添加跳转功能

    1. {% extends 'template.html' %}
    2. {% block title_content %}
    3.     靓号列表
    4. {% endblock %}
    5.  
    6. {% block content %}
    7.     <div class="container">
    8.         <div class="panel panel-default">
    9.             
    10.             <div class="panel-heading">
    11.                 <span class="glyphicon glyphicon-th-list" aria-hidden="true">span>
    12.                 靓号列表
    13.             div>
    14.             
    15.             <table class="table table-bordered">
    16.                 <thead>
    17.                 <th>IDth>
    18.                 <th>号码th>
    19.                 <th>价格th>
    20.                 <th>级别th>
    21.                 <th>状态th>
    22.                 <th>操作th>
    23.                 thead>
    24.                 <tbody>
    25.                 {% for qurey in qureyset %}
    26.                     <tr>
    27.                         <th>{{ qurey.id }}th>
    28.                         <td>{{ qurey.mobile }}td>
    29.                         <td>{{ qurey.price }}td>
    30.                         <td>{{ qurey.get_level_display }}td>
    31.                         <td>{{ qurey.get_status_display }}td>
    32.                         <td>
    33.                             <a class="btn btn-primary btn-xs" href="/pretty/{{ qurey.id }}/edit">编辑a>
    34.                             <a class="btn btn-danger btn-xs" href="/pretty/delete/?nid={{ qurey.id }}">删除a>
    35.                         td>
    36.                     tr>
    37.                 {% endfor %}
    38.                 tbody>
    39.             table>
    40.         div>
    41.         
    42.         <div>
    43.             <ul class="pagination">
    44.                 {{ page_string }}
    45.             ul>
    46.         div>
    47.         
    48.         <form method="get">
    49.             <div class="input-group">
    50.                 <input style="height: 32px" name="page" type="text" placeholder="请输入要跳转的页码">
    51.                 <span style="width: 100px">
    52.                 <button class="btn btn-default,left" type="submit">跳转button>
    53.                 span>
    54.             div>
    55.         form>
    56.     div>
    57. {% endblock %}

    页面:

     

    （8）完整代码：

     pretty_list.html

    1. {% extends 'template.html' %}
    2. {% block title_content %}
    3.     靓号列表
    4. {% endblock %}
    5.  
    6. {% block content %}
    7.     <div class="container">
    8.         <div class="panel panel-default">
    9.             
    10.             <div class="panel-heading">
    11.                 <span class="glyphicon glyphicon-th-list" aria-hidden="true">span>
    12.                 靓号列表
    13.             div>
    14.             
    15.             <table class="table table-bordered">
    16.                 <thead>
    17.                 <th>IDth>
    18.                 <th>号码th>
    19.                 <th>价格th>
    20.                 <th>级别th>
    21.                 <th>状态th>
    22.                 <th>操作th>
    23.                 thead>
    24.                 <tbody>
    25.                 {% for qurey in qureyset %}
    26.                     <tr>
    27.                         <th>{{ qurey.id }}th>
    28.                         <td>{{ qurey.mobile }}td>
    29.                         <td>{{ qurey.price }}td>
    30.                         <td>{{ qurey.get_level_display }}td>
    31.                         <td>{{ qurey.get_status_display }}td>
    32.                         <td>
    33.                             <a class="btn btn-primary btn-xs" href="/pretty/{{ qurey.id }}/edit">编辑a>
    34.                             <a class="btn btn-danger btn-xs" href="/pretty/delete/?nid={{ qurey.id }}">删除a>
    35.                         td>
    36.                     tr>
    37.                 {% endfor %}
    38.                 tbody>
    39.             table>
    40.         div>
    41.         
    42.         <div class="clearfix">
    43.             <ul class="pagination" style="float: left">
    44.                 {{ page_string }}
    45.                 <li>
    46.                     
    47.                     <form style="float: left;margin-left: -1px" method="get">
    48.                             <input name="page"
    49.                                    style="position: relative;float: left;display: inline-block;width: 80px;border-radius: 0;"
    50.                                    type="text" class="form-control" placeholder="页码">
    51.                             <button style="border-radius: 0" class="btn btn-default" type="submit">跳转button>
    52.                     form>
    53.                 li>
    54.             ul>
    55.         div>
    56.     div>
    57. {% endblock %}

    views.py

    1. def pretty_list(request):
    2.     """靓号列表"""
    3.     # for i in range(100):
    4.     #     models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
    5.  
    6.     # 搜索字典
    7.     data_dict = {}
    8.     value = request.GET.get("q", "")
    9.     if value:
    10.         data_dict["mobile__contains"] = value
    11.     # 获取的列表按等级降序排列
    12.     # select * from 表 order by level desc;
    13.     # qureyset = models.PrettyNum.objects.all().order_by("-level")
    14.     # 分页功能
    15.     # 根据用户访问页码计算起始位置
    16.     page = int(request.GET.get("page", 1))
    17.     page_size = 10
    18.     start = (page - 1) * page_size
    19.     end = page * page_size
    20.  
    21.     qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]
    22.     # 生成页码代码
    23.     """
    24.                 
    25. 1
    26.                 
    27. 2
    28.                 
    29. 3
    30.                 
    31. 4
    32.                 
    33. 5
    34.                 ……
    35.     """
    36.     # 获取数据库中的数据条数
    37.     total_count = models.PrettyNum.objects.filter(**data_dict).order_by("-level").count()
    38.     # 总页数
    39.     total_page_count, div = divmod(total_count, page_size)  # divmod除法函数，返回值：商，余数
    40.     if div:
    41.         total_page_count += 1
    42.     # 设置按钮显示范围
    43.     plus = 5
    44.     if total_page_count <= 2 * plus + 1:
    45.         start_page = 1
    46.         end_page = total_page_coun + 1
    47.     else:
    48.         # 当前页小于5
    49.         if page <= plus:
    50.             start_page = 1
    51.             end_page = 2 * plus + 1
    52.         else:
    53.             if (page + plus) > total_page_count:
    54.                 start_page = total_page_count - 2 * plus
    55.                 end_page = total_page_count
    56.             else:
    57.                 start_page = page - plus
    58.                 end_page = page + plus + 1
    59.  
    60.     # 页码列表
    61.     page_str_list = []
    62.     #首页
    63.     page_str_list.append('
    64. 首页
      65. '.format(1))
    65.     # 上一页
    66.     if page > 1:
    67.         prev = '
    68. 上一页
      69. '.format(page - 1)
    69.     else:
    70.         prev = '
    71. 上一页
      72. '.format(1)
    72.     page_str_list.append(prev)
    73.     # 页码
    74.     for i in range(start_page, end_page):  # range前取后不取，所以还要加一
    75.         if i == page:  # 当前页显示按钮样式
    76.             ele = '
    77. {}
      78. '.format(i, i)
    78.         else:
    79.             ele = '
    80. {}
      81. '.format(i, i)
    81.         page_str_list.append(ele)
    82.     # 下一页
    83.     if page < total_page_count:
    84.         prev = '
    85. 下一页
      86. '.format(page + 1)
    86.     else:
    87.         prev = '
    88. 下一页
      89. '.format(total_page_count)
    89.     page_str_list.append(prev)
    90.     # 尾页
    91.     page_str_list.append('
    92. 尾页
      93. '.format(total_page_count))
    93.     page_string = mark_safe("".join(page_str_list))
    94.     return render(request, "pretty_list.html", {"qureyset": qureyset, "value": value, "page_string": page_string})
    95.  
    '
    运行

    页面

     

  • 相关阅读:
    WordArt Designer：基于用户驱动与大语言模型的艺术字生成
    springboot实现java线程池
    贡献者和律师的Web3指南：充分去中心化
    手机系统要不要更新？来看看这个答案
    Mac M1通过homebrew安装Redis报错(perl: unknown or unsupported macOS version: :dunno)
    mongodb基本操作命令
    一篇五分生信临床模型预测文章代码复现——Figure 4-6 临床模型构建（四）
    异类词典的实现
    【数据结构】栈和队列
    JavaSE学习之--抽象类和接口
  • 原文地址：https://blog.csdn.net/qq_51701007/article/details/126938180