• Django实战项目-学习任务系统-查询列表分页显示

    接着上期代码框架，6个主要功能基本实现，剩下的就是细节点的完善优化了。

    接着优化查询列表分页显示功能，有很多菜单功能都有查询列表显示页面情况，如果数据量多，不分页显示的话，页面展示效果就不太好。

    本次增加查询列表分页显示功能，对一个查询列表功能进行分页改造，其他依此类推即可。

    第一步：Django的分页器（paginator）简介

    Django的分页器（paginator）是一个内置的分页组件，它可以方便地实现分页功能。当页面需要显示大量数据时，例如超过10000条，使用分页器可以提高阅读体验并减轻服务器压力。

    要使用Django的分页器，首先需要从`django.core.paginator`模块中引入`Paginator`类以及相关的异常模块：`PageNotAnInteger`和`EmptyPage`。

    `Paginator`是用于管理整个分页的逻辑，如控制总共有多少页、页码区间等。而`Page`类则是用来管理当前这个页面的一些属性。

    以下是创建`Paginator`对象的简单语法：
    ```python
    class Paginator(object_list, per_page, orphans=0, allow_empty_first_page=True)
    ```
    其中，`object_list`是你要分页的数据列表，`per_page`是每页显示的数据条数。

    例如:
    给 Paginator 一个对象列表，以及你希望在每个页面上拥有的项目数，它提供了访问每页项目的方法：

    1. >>> from django.core.paginator import Paginator
    2. >>> objects = ['john', 'paul', 'george', 'ringo']
    3. >>> p = Paginator(objects, 2)
    5. >>> p.count
    6. 4
    7. >>> p.num_pages
    8. 2
    9. >>> type(p.page_range)
    10. <class 'range_iterator'>
    11. >>> p.page_range
    12. range(1, 3)
    13.  
    14. >>> page1 = p.page(1)
    15. >>> page1
    16. <Page 1 of 2>
    17. >>> page1.object_list
    18. ['john', 'paul']
    19.  
    20. >>> page2 = p.page(2)
    21. >>> page2.object_list
    22. ['george', 'ringo']
    23. >>> page2.has_next()
    24. False
    25. >>> page2.has_previous()
    26. True
    27. >>> page2.has_other_pages()
    28. True
    29. >>> page2.next_page_number()
    30. Traceback (most recent call last):
    31. ...
    32. EmptyPage: That page contains no results
    33. >>> page2.previous_page_number()
    34. 1
    35. >>> page2.start_index() # The 1-based index of the first item on this page
    36. 3
    37. >>> page2.end_index() # The 1-based index of the last item on this page
    38. 4
    39.  
    40. >>> p.page(0)
    41. Traceback (most recent call last):
    42. ...
    43. EmptyPage: That page number is less than 1
    44. >>> p.page(3)
    45. Traceback (most recent call last):
    46. ...
    47. EmptyPage: That page contains no results

    第二步：修改视图文件
    ./mysite/study_system/views.py

    1. def getStudyPointsList(request):
    2.     '''
    3.     @方法名称: 获取积分明细列表
    4.     @作    者: PandaCode辉
    5.     @weixin公众号: PandaCode辉
    6.     @创建时间: 2023-10-10
    7.     '''
    8.     # 响应容器
    9.     rsp_dict = {}
    10.  
    11.     # 获取当前用户名
    12.     username = request.session.get('username')
    13.     # 根据用户名获取用户对象
    14.     cur_user = StudyUser.objects.get(username=username)
    15.     print('根据用户名查询用户对象:' + str(cur_user))
    16.     # 2. 获取要分页的数据集合（例如从数据库查询），当前用户的全部积分明细， .order_by('-created_time') 降序排列
    17.     data_list = StudyPoint.objects.filter(user_id=cur_user).order_by('-created_time')
    18.     # 3. 每页显示的数据数量
    19.     items_per_page = 5
    20.     # 4. 创建 Paginator 对象
    21.     paginator = Paginator(data_list, items_per_page)
    22.     # 5. 获取当前页数（从请求参数中获取，或者默认为第一页）
    23.     current_page_num = request.GET.get('page', 1)
    24.     '''
    25.         1.整个数据表
    26.          paginator.count   数据总数
    27.          paginator.num_pages   总页数
    28.          paginator.page_range   页码的列表
    29.         2.当前页
    30.          curuent_page.has_next()   是否有下一页
    31.          curuent_page.next_page_number()   下一页的页码
    32.          curuent_page.has_previous()   是否有上一页
    33.          curuent_page.previous_page_number()   上一页的页码
    34.     '''
    35.     # 6. 获取当前页的数据对象
    36.     try:
    37.         current_page_data = paginator.page(current_page_num)
    38.     except EmptyPage:
    39.         # 处理页码超出范围的情况
    40.         current_page_data = paginator.page(paginator.num_pages)
    41.  
    42.     # 获取整个表的总页数
    43.     total_page = paginator.num_pages
    44.     pag_range = []
    45.     if total_page <= 11:  # 判断当前页是否小于11个
    46.         pag_range = paginator.page_range
    47.     elif total_page > 11:
    48.         if current_page_num < 6:
    49.             pag_range = range(1, 11)
    50.         elif current_page_num > paginator.num_pages - 5:
    51.             pag_range = range(total_page - 9, total_page + 1)
    52.         else:
    53.             pag_range = range(current_page_num - 5, current_page_num + 5)  # 当前页+5大于最大页数时
    54.  
    55.     # 7. 在模板中使用 current_data_page 来渲染分页数据
    56.     # 查询待完成任务列表
    57.     rsp_dict['data_list'] = data_list
    58.     rsp_dict['paginator'] = paginator
    59.     rsp_dict['current_page_num'] = current_page_num
    60.     rsp_dict['current_page_data'] = current_page_data
    61.     rsp_dict['pag_range'] = pag_range
    62.  
    63.     context_object_name = "study_points_list"
    64.     template_name = "study_system/home.html"
    65.     # 'html_file': 'xxx.html' 动态指定模板页面 ; 'menuTo': 'task' = 任务管理 ；
    66.     rsp_dict['html_file'] = 'study_system/item/studyPointsList.html'
    67.     rsp_dict['context_object_name'] = context_object_name
    68.  
    69.     return render(request, template_name, rsp_dict)

    第三步：修改页面模板代码

    1. 积分流水列表页面
    ./mysite/study_system/templates/study_system/item/studyPointsList.html

    1. <style type="text/css">
    2.     table tr td {
    3.         font-size: 1.5em;
    4.     }
    5. style>
    7. <div align="center">
    8.     <table style='width: 100%;'>
    9.         <tr>
    10.             <td colspan="6" align="center">积分明细流水td>
    11.         tr>
    12.         <tr style="font-weight: bold; background: #FFEC8B;text-align: center">
    13.             <td>序号td>
    14.             <td>积分说明td>
    15.             <td>交易类型td>
    16.             <td>积分数td>
    17.             <td>交易时间td>
    18.             <td>用户名td>
    19.         tr>
    20.         {% if current_page_data %}
    21.             {% for studyPoints in current_page_data %}
    22.                 {% if studyPoints.point_type == 0 %}
    23.                     <tr style="color: blue;text-align: center">
    24.                         {# forloop.counter 可以记录循环的次数，作为列表序号#}
    25.                         <td>{{ forloop.counter }}td>
    26.                         <td>{{ studyPoints.point_name }}td>
    27.                         <td>兑换物品td>
    28.                         <td>{{ studyPoints.points_nums }}td>
    29.                         <td>{{ studyPoints.created_time|date:'Y-m-d H:i:s' }}td>
    30.                         <td>{{ studyPoints.user_id.username }}td>
    31.                     tr>
    32.                 {% elif studyPoints.point_type == 1 %}
    33.                     <tr style="color: red;text-align: center">
    34.                         <td>{{ forloop.counter }}td>
    35.                         <td>{{ studyPoints.point_name }}td>
    36.                         <td>成功奖励td>
    37.                         <td>{{ studyPoints.points_nums }}td>
    38.                         <td>{{ studyPoints.created_time|date:'Y-m-d H:i:s' }}td>
    39.                         <td>{{ studyPoints.user_id.username }}td>
    40.                     tr>
    41.                 {% elif studyPoints.point_type == 2 %}
    42.                     <tr style="color: green;text-align: center">
    43.                         <td>{{ forloop.counter }}td>
    44.                         <td>{{ studyPoints.point_name }}td>
    45.                         <td>失败处罚td>
    46.                         <td>{{ studyPoints.points_nums }}td>
    47.                         <td>{{ studyPoints.created_time|date:'Y-m-d H:i:s' }}td>
    48.                         <td>{{ studyPoints.user_id.username }}td>
    49.                     tr>
    50.                 {% endif %}
    51.             {% endfor %}
    52.         {% else %}
    53.             <tr>
    54.                 <td colspan="6" id="con_title">查无记录td>
    55.             tr>
    56.         {% endif %}
    57.     table>
    58. div>
    59. <div align="center">
    60.     {% include "study_system/common/page.html" %}
    61. div>

    2. 公共页码页面
    ./mysite/study_system/templates/study_system/common/page.html

    1. <div>
    2.     <nav aria-label="Page navigation">
    3.         <ul class="pagination">
    4.             {% if not current_page_data.has_previous %}
    5.                 <li class="disable">
    6.                     <a href="#" aria-label="Previous">
    7.                         <span aria-hidden="true">上一页span>
    8.                     a>
    9.                 li>
    10.             {% else %}
    11.                 <li>
    12.                     <a href="?page={{ current_page_data.previous_page_number }}" aria-label="Previous">
    13.                         <span aria-hidden="true">上一页span>
    14.                     a>
    15.                 li>
    16.             {% endif %}
    17.  
    18.             {% for page_range in pag_range %}
    19.                 {% if current_page_num == page_range %}
    20.                     <li class="active"><a href="?page={{ page_range }}">{{ page_range }}a>li>
    21.                 {% else %}
    22.                     <li><a href="?page={{ page_range }}">{{ page_range }}a>li>
    23.                 {% endif %}
    24.             {% endfor %}
    25.  
    26.             {% if not current_page_data.has_next %}
    27.                 <li class="disable">
    28.                     <a href="?page={{ current_page_num }}" aria-label="Next">
    29.                         <span aria-hidden="true">下一页span>
    30.                     a>
    31.                 li>
    32.             {% else %}
    33.                 <li>
    34.                     <a href="?page={{ current_page_data.next_page_number }}" aria-label="Next">
    35.                         <span aria-hidden="true">下一页span>
    36.                     a>
    37.                 li>
    38.             {% endif %}
    39.  
    40.         ul>
    41.     nav>
    42. div>

    第四步：运行测试

    1. 点击查看积分流水列表页面

     -------------------------------------------------end -------------------------------------------------

  • 相关阅读:
    Django简单介绍
    web端三维重建算法-colmap++
    11.16堆的一些性质与操作
    (C++进阶) C++11
    TikTok营销攻略：如何精准测试与优化品牌营销策略
    小黑升级记----记ThinkPad470p加装固态盘
    1314. 矩阵区域和-矩阵前缀和算法
    PHP有关JWT(Json Web Token)的那些事
    上周热点回顾（8.29-9.4）
    七天速通javaSE：第四天 数组进阶
  • 原文地址：https://blog.csdn.net/xionghui2007/article/details/134176426