Django 简单实现分页与搜索功能的示例代码

2019-11-25 11:27:56

字体：大中小

来源：转载

供稿：网友

假设现有需求如下：

需要一个页面分页展示信息，在该页面添加搜索框以提供检索功能。

那么，我们知道，展示信息和检索功能是在同一个页面，也就是共用一个路由。

代码如下：

第一步，写路由：为了清晰，这里只给出主页和展示页面的路由。

urls.py：

from django.urls import pathfrom . import viewsfrom django.conf.urls.static import staticfrom django.conf import settingsfrom django.contrib.staticfiles.urls import staticfiles_urlpatterns # from django.contrib import staticfiles urlpatterns = [ # 主页 path('', views.index),  # 访问他人信息入口，分页展示 path('other/profile', views.request_user),  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)urlpatterns += staticfiles_urlpatterns()

第二步，写视图：这里做了访问限制，登录才能访问

views.py：

from django.contrib.auth.decorators import login_requiredfrom django.shortcuts import render, redirectfrom django.http import HttpResponseRedirect, HttpResponsefrom django.contrib.auth import authenticate, login, logoutfrom .models import UserInfo, Email_Message, Wastesfrom django.contrib.auth.models import AnonymousUserfrom django.core.paginator import Paginator, EmptyPage, PageNotAnInteger @login_required(login_url='/tologin')def request_user(request): # 实现搜索 key = request.GET.get('key') all_users = UserInfo.objects.filter(cate="买家").all() userlist = [] # 如果前端传入关键字，才会进行检索，否则显示全部买家 if key:  for user in all_users:   if key in user.address:    userlist.append(user)  all_users = userlist if all_users:  paginator = Paginator(all_users, 2)  page = request.GET.get('page')  try:   contacts = paginator.page(page)  except PageNotAnInteger:   contacts = paginator.page(1)  except EmptyPage:   contacts = paginator.page(paginator.num_pages)  return render(request, 'Myapp/userlist.html', {'contacts': contacts}) else:  info = '暂无数据'  return render(request, 'Myapp/userlist.html', {'info': info})

分页的原理是用到了django自带的分页组件

需要注意的是，搜索的关键字传参，用的是GET请求，而不是POST请求

简单来说，就是先判断前端页面是否用搜索框搜索了关键字，如果搜索了，那么这个词会被

key = request.GET.get('key')

赋值给key，然后进行后续判断处理即可。

如果没有，就正常展示我们需要展示的。

分页的原理。

可以去看这个组件的文档介绍。

如果返回的key检索不到结果，返回空数据页，并提醒。

html代码：

{% load static %}<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head>  <!-- favicon.ico ================================================== --> <link rel='shortcut icon' href="{% static 'Myapp/img/favicon.con' %}" rel="external nofollow" type="image/x-icon"/>  <!-- Basic Page Needs ================================================== --> <meta charset="utf-8"> <title>Detail</title> <meta name="description" content=""> <meta name="author" content="">  <!-- Mobile Specific Metas	================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <!-- CSS	================================================== --> <link rel="stylesheet" href="{% static 'Myapp/css/zerogrid.css' %}" rel="external nofollow" > <link rel="stylesheet" href="{% static 'Myapp/css/style.css' %}" rel="external nofollow" > <link rel="stylesheet" href="{% static 'Myapp/css/lightbox.css' %}" rel="external nofollow" >  <!-- Custom Fonts --> <link href="{% static 'Myapp/assets/css/font-awesome.min.css' %}" rel="external nofollow" rel="stylesheet" type="text/css">   <link rel="stylesheet" href="{% static 'Myapp/css/menu.css' %}" rel="external nofollow" > <link rel="stylesheet" href="{% static 'Myapp/assets/css/bootstrap.min.css' %}" rel="external nofollow" > <script src="{% static 'Myapp/js/jquery1111.min.js' %}" type="text/javascript"></script> <script src="{% static 'Myapp/js/script.js' %}"></script>  <!--[if lt IE 8]>  <div style=' clear: both; text-align:center; position: relative;'>   <a href="http://windows.microsoft.com/en-US/internet-explorer/Items/ie/home?ocid=ie6_countdown_bannercode" rel="external nofollow" >   <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />  </a>  </div> <![endif]--> <!--[if lt IE 9]>		<script src="js/html5.js"></script>		<script src="js/css3-mediaqueries.js"></script>	<![endif]--> </head> <body><div class="wrap-body">  <!--////////////////////////////////////Header--> <header class="zerogrid">  <div class="logo"><img src="{% static 'Myapp/img/logo.png' %}" alt=""/></div>  <div id='cssmenu' class="align-center">   <ul>    <li><a href='http://127.0.0.1:8000/'><span>主页</span></a></li>    <li><a href='http://127.0.0.1:8000/about'><span>关于我们</span></a></li>    <li><a href='http://127.0.0.1:8000/show_detail'><span>每日看价</span></a></li>    <li><a href='http://127.0.0.1:8000/other/profile'><span>找个买家</span></a></li>    <li class='last'><a href='http://127.0.0.1:8000/contact'><span>联系我们</span></a></li>   </ul>  </div>  <form style="float: right">   {% csrf_token %}   <label>    <div class="form-group">     <input type="search" class="form-control" name="key" placeholder="您可输入所在城市以检索买家">    </div>   </label>   <input class="btn btn-default" type="submit" value="搜索">  </form> </header>  <!--////////////////////////////////////Container--> <div style="text-align: center">  <table style="float: contour; margin:0 auto;text-align: center; width: 800px;" class="table table-bordered">   <tr style="text-align: center" class="success">    <td>昵称</td>    <td>地址</td>    <td>最近活跃</td>   </tr>   {% for u in contacts %}    <tr class="info">     <td><a       href="http://127.0.0.1:8000/other/profile/{{ u.username }}" rel="external nofollow" >{{ u.username }}</a>     </td>     <td>{{ u.address }}</td>     <td>{{ u.last_login }}</td>    </tr>   {% endfor %}  </table> </div>   <div class="navigation">  <ul>   {% for pg in contacts.paginator.page_range %}    {% if contacts.number == pg %}     <li class="active"><a href="?page={{ pg }}" rel="external nofollow" rel="external nofollow" >{{ pg }}</a></li>    {% else %}     <li><a href="?page={{ pg }}" rel="external nofollow" rel="external nofollow" >{{ pg }}</a></li>    {% endif %}   {% endfor %}    {% if contacts.has_next %}    <li><a href="?page={{ contacts.next_page_number }}" rel="external nofollow" >下一页</a></li>   {% endif %}  </ul> </div> <!--////////////////////////////////////Footer--> </div>{% if info %} <script>  window.alert('{{ info }}'); </script>{% endif %}</body></html>

效果：

主页主要功能部分：