当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2019-11-07 15:06

    假设现有需求如下:

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

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

    代码如下:

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

    urls.py:

    from django.urls import path
    from . import views
    from django.conf.urls.static import static
    from django.conf import settings
    from 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_required
    from django.shortcuts import render, redirect
    from django.http import HttpResponseRedirect, HttpResponse
    from django.contrib.auth import authenticate, login, logout
    from .models import UserInfo, Email_Message, Wastes
    from django.contrib.auth.models import AnonymousUser
    from 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 >
       <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 >
       {% 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 >
      <table  class="table table-bordered">
       <tr  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>