• ◢Django 分页+搜索

    1、搜索数据

    从数据库中获取数据，并进行筛选，xx__contains = q作为条件，查找的是xx列中有q的所有数据条

    当有多个筛选条件时，将条件变成一个字典，传入 **字典 ，ORM会自行翻译并查找。

    筛选电话号码这一列，若数据量过少，使用random库多次生成

    1. html>
    2. {% load static %}
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7.     <script src="{% static '/js/jquery-3.6.0.min.js' %}">script>
    8.     <style>
    9.         @import "{% static 'css/tab.css' %}";
    10.     style>
    11. head>
    12. <body>
    13. <form method="get">
    14. <input type="text" name="search"><button type="submit">搜索button>
    15. form>
    16. <hr>
    17. <table>
    18.     <tr>
    19.         <td>IDtd>
    20.         <td>号码td>
    21.         <td>价格td>
    22.         <td>等级td>
    23.         <td>状态td>
    24.     tr>
    25.     {% for i in data %}
    26.         <tr>
    27.             <td>{{ i.id }}td>
    28.             <td>{{ i.phone }}td>
    29.             <td>{{ i.price }}td>
    30.             <td>{{ i.level }}td>
    31.             <td>{{ i.get_status_display }}td>
    32.         tr>
    33.     {% endfor %}
    34. table>
    35. body>
    36. html>
    1. def in4(request):
    2.     if request.method == 'GET':
    3.         data_dict = {}
    4.         search = request.GET.get('search')
    5.         print(search)
    6.         if search:
    7.             data_dict['phone__contains'] = search
    8.         # 获取数据库的数据
    9.         querset = models.User.objects.filter(**data_dict).order_by('level')
    10.         return render(request,'in4.html',{"data":querset})

    输入筛选条件， 点击搜索，会自动更新页面并清除输入框中的内容

    return 加入search，在input框中加入显示搜索的数据

    placeholder="{{ search }}"

     2、加入分页

    按照上节直接加上，会导致搜索与分页不能同时存在，要对page与search进行url拼接【字典.urlencode()】

    request请求传递过来的参数，不允许对其进行更改，先对其进行深拷贝，在拷贝出的数据上进行page与search两个参数的修改。

    1. import copy
    2. req = copy.deepcopy(request.GET)#深拷贝get请求
    3. req._mutable = True
    4.  
    5. req.setlist(key,iter)#iter必须是可迭代对象
    6.  
    7. req.urlencode()

    设置一页显示的最大数据条数，获取page参数 ，对筛选后的数据进行分页截取，设置起始页与结束页至当前页的最大距离，循环设置分页的页码

    1. import copy
    2. req = copy.deepcopy(request.GET)#深拷贝get请求
    3. req._mutable = True
    4.  
    5. page_size = 10
    6. if request.GET.get('page'):
    7.     current_page = int(request.GET.get('page'))
    8. else:
    9.     current_page = 1
    10. page_count, count = divmod(data_count, page_size)  # 共有多少页
    11. if count:
    12.     page_count += 1
    13. # 获取数据的起始位置与结束位置
    14. start = int(current_page - 1) * page_size
    15. if current_page == page_count:  # 当前页是最后一页时，数据并不是page_size条数据
    16.     end = data_count
    17. else:
    18.     end = int(current_page) * page_size
    19. print(start, end)
    20. data = querset[start:end]#从筛选后的数据中进行的分页数据
    21.  
    22. #设置分页最大显示
    23. plus = 3
    24. if current_page <= plus + 1:
    25.     start_page = 1
    26. else:
    27.     start_page = current_page - plus
    28. # 当前页大于等于最终点页 结束页始终为终点页 ；当前页小于终点页减plus 结束页为当前页+plus
    29. if current_page >= page_count - plus:
    30.     end_page = page_count
    31. else:
    32.     end_page = current_page + plus
    33. #在筛选好的数据基础上，点击2页时不会使得search条件失去效果
    34. page_string = ''
    35. for i in range(start_page, end_page+1):
    36.     req.setlist('page',[i])
    37.     if i == current_page:#为活动页增加样式，突出显示当前页
    38.         page_string += f"{req.urlencode()}>{i}"
    39.     else:
    40.         page_string += f"{req.urlencode()}>{i}"
    41.     page_string = mark_safe("".join(page_string))
    42. return render(request,'in4.html',{"data":data,"page_string":page_string})

     3、上一页与下一页

    在点击页码的情况下增加上一页下一页的按钮，当前看到的最后页码变为第一个页码。

    看见第一页不显示上一页按钮，同样最后一页也不带按钮。

    处于看不见首页，但又不超过加减页时，点击上一页会跳出合适的页码，应当设置page=1，拉回跳转位置，放置page变为负数，尾页也一样。

    页码满足加减页时，实行最后一个页码变第一个页码，在当前页的页码基础上 加上 或 减去 plus的2倍

    1. def  in4(request):
    2.        ...
    3.        if current_page <= plus + 1:
    4.             pre = ''
    5.         else:
    6.             if current_page <= plus * 2:  # 当前页处于大于1个plus，小于2个plus页时，点击上一页，跳转到第1页
    7.                 req.setlist('page',[1])
    8.                 pre = f'{req.urlencode()}>首页'
    9.             else:
    10.                 req.setlist('page', [current_page - plus * 2])
    11.                 pre = f'{req.urlencode()}>上一页'
    12.         # 下一页同上一页一致
    13.         if current_page >= page_count - plus:
    14.             next = ''
    15.         else:
    16.             if current_page >= page_count - plus * 2:
    17.                 req.setlist('page',[page_count])
    18.                 next = f'{page_count}>尾页'
    19.             else:
    20.                 req.setlist('page',[current_page + plus * 2])
    21.                 next = f'{req.urlencode()}>下一页'

    4、封装

    建立软件包，命名为utils

     在utils中建立SplitPage.py，整合前面程序，该封装的封装，该方法体的方法体,page_size与plus进行内定义

    1. from django.utils.safestring import mark_safe
    2. import copy
    3. class Splitpagenumber:
    4.     def __init__(self,request,queryset,page_size=10,plus=3):
    5.         #确实获取到page，若没有则默认为首页
    6.         if request.GET.get('page'):
    7.             self.current_page = int(request.GET.get('page'))
    8.         else:
    9.             self.current_page = 1
    10.  
    11.         #拷贝get，为后续使用做准备
    12.         req = copy.deepcopy(request.GET)
    13.         req._mutable = True
    14.         self.req = req
    15.  
    16.         #计算页码总数
    17.         self.page_count,count = divmod(queryset.count(),page_size)
    18.         if count:
    19.             self.page_count += 1
    20.  
    21.         #为筛选好的数据进行分页
    22.         start = int(self.current_page - 1) * page_size
    23.         if self.current_page == self.page_count:
    24.             end = queryset.count()
    25.         else:
    26.             end = int(self.current_page) * page_size
    27.         self.page_data = queryset[start:end]  # 从筛选后的数据中进行的分页数据
    28.  
    29.         #
    30.         self.plus=plus
    31.  
    32.     def html(self):
    33.         if self.current_page <= self.plus + 1:
    34.             start_page = 1
    35.             pre = ''
    36.         else:
    37.             start_page = self.current_page - self.plus
    38.             if self.current_page <= self.plus * 2:  
    39.                 self.req.setlist('page',[1])
    40.                 pre = f'{self.req.urlencode()}>首页'
    41.             else:
    42.                 self.req.setlist('page', [self.current_page - self.plus * 2])
    43.                 pre = f'{self.req.urlencode()}>上一页'
    44.         
    45.         if self.current_page >= self.page_count - self.plus:
    46.             end_page = self.page_count
    47.             behe=''
    48.         else:
    49.             end_page = self.current_page + self.plus
    50.             if self.current_page >= self.page_count - self.plus * 2:
    51.                 self.req.setlist('page',[self.page_count])
    52.                 behe = f'{self.page_count}>尾页'
    53.             else:
    54.                 self.req.setlist('page',[self.current_page + self.plus * 2])
    55.                 behe = f'{self.req.urlencode()}>下一页'
    56.  
    57.         # 在筛选好的数据基础上，点击2页时不会使得search条件失去效果
    58.         page_string = ''
    59.         page_string += pre
    60.         for i in range(start_page, end_page + 1):
    61.             self.req.setlist('page', [i])
    62.             if i == self.current_page:
    63.                 page_string += f"{self.req.urlencode()}>{i}"
    64.             else:
    65.                 page_string += f"{self.req.urlencode()}>{i}"
    66.         page_string += behe
    67.         page_string = mark_safe("".join(page_string))
    68.         return page_string

    5、使用封装好的分页搜索

    1. from app02.utils.SplitPage import Splitpagenumber
    2. def in5(request):
    3.     data_dict={}
    4.     search = request.GET.get('search')
    5.     if search:
    6.         data_dict['phone__contains'] = search
    7.     queryset = models.User.objects.filter(**data_dict)
    8.     page_obj = Splitpagenumber(request,queryset)#传递筛选好的数据
    9.     data = page_obj.page_data
    10.     page_string = page_obj.html()
    11.     context={
    12.         "search":search,
    13.         "data": data,
    14.         "page_string": page_string
    15.     }
    16.     return render(request,'in5.html',context)
    1. html>
    2. {% load static %}
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7.     <script src="{% static '/js/jquery-3.6.0.min.js' %}">script>
    8.     <style>
    9.         @import "{% static 'css/tab.css' %}";
    10.         *{
    11.             padding: 0;
    12.             list-style: none;
    13.             margin: 0;
    14.         }
    15.         span{
    16.             display: inline-block;
    17.             width: 40px;
    18.             text-align: center;
    19.             font-size: 20px;
    20.             border: 1px solid;
    21.             background-color: #2aabd2;
    22.         }
    23.         a{
    24.             text-decoration: none;
    25.             color: white;
    26.         }
    27.         div{
    28.             width: 1200px;
    29.         }
    30.         aside{
    31.             width: 800px;
    32.             margin: 0 auto;
    33.         }
    34.         .data{
    35.             width: 300px;
    36.             height: 225px;
    37.             border: 1px solid #8a6d3b;
    38.             margin-bottom: 30px;
    39.         }
    40.         .updown{
    41.             display: inline-block;
    42.             width: 80px;
    43.         }
    44.         .updown a{
    45.             font-size: 15px;
    46.             line-height: 20px;
    47.         }
    48.     style>
    49. head>
    50. <body>
    51. <form method="get">
    52. <input type="text" name="search" placeholder="{{ search }}"><button type="submit">搜索button>
    53. form>
    54. <hr style="margin-bottom: 10px;">
    55. <table>
    56.     <tr>
    57.         <td>IDtd>
    58.         <td>号码td>
    59.         <td>价格td>
    60.         <td>等级td>
    61.         <td>状态td>
    62.     tr>
    63. {#    插入数据条#}
    64.     {% for i in data %}
    65.         <tr>
    66.             <td>{{ i.id }}td>
    67.             <td>{{ i.phone }}td>
    68.             <td>{{ i.price }}td>
    69.             <td>{{ i.level }}td>
    70.             <td>{{ i.get_status_display }}td>
    71.         tr>
    72.     {% endfor %}
    73. table>
    74. <ul>
    75.     {{ page_string }}
    76. ul>
    77. body>
    78. html>

  • 相关阅读:
    PostgreSQL执行计划介绍
    JavaScript基础（1）
    xxl-job 快速使用
    Vue 2和Vue 3透传Attributes特性
    mysql 客户端简单搭建
    leetcode(力扣) 347. 前 K 个高频元素（优先队列 & 堆 & 哈希计数器）
    H5/CSS 笔试面试考题（81-90）
    Python基础——数据类型
    2023年中国粘度指数改进剂行业需求现状及前景分析[图]
    【Mybatis源码】IDEA中Mybatis源码环境搭建
  • 原文地址：https://blog.csdn.net/m0_62836433/article/details/134387864