快捷導(dǎo)航

Django 簡(jiǎn)單實(shí)現(xiàn)分頁與搜索功能的示例代碼

更新時(shí)間：2019年11月07日 11:56:30 作者：s_kangkang_A

這篇文章主要介紹了Django 簡(jiǎn)單實(shí)現(xiàn)分頁與搜索功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

假設(shè)現(xiàn)有需求如下：

需要一個(gè)頁面分頁展示信息，在該頁面添加搜索框以提供檢索功能。

那么，我們知道，展示信息和檢索功能是在同一個(gè)頁面，也就是共用一個(gè)路由。

代碼如下：

第一步，寫路由：為了清晰，這里只給出主頁和展示頁面的路由。

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):
 # 實(shí)現(xiàn)搜索
 key = request.GET.get('key')
 all_users = UserInfo.objects.filter(cate="買家").all()
 userlist = []
 # 如果前端傳入關(guān)鍵字，才會(huì)進(jìn)行檢索，否則顯示全部買家
 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 = '暫無數(shù)據(jù)'
  return render(request, 'Myapp/userlist.html', {'info': info})

分頁的原理是用到了django自帶的分頁組件

需要注意的是，搜索的關(guān)鍵字傳參，用的是GET請(qǐng)求，而不是POST請(qǐng)求

簡(jiǎn)單來說，就是先判斷前端頁面是否用搜索框搜索了關(guān)鍵字，如果搜索了，那么這個(gè)詞會(huì)被

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

賦值給key，然后進(jìn)行后續(xù)判斷處理即可。

如果沒有，就正常展示我們需要展示的。

分頁的原理。

可以去看這個(gè)組件的文檔介紹。

如果返回的key檢索不到結(jié)果，返回空數(shù)據(jù)頁，并提醒。

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  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 ><span>主頁</span></a></li>
    <li><a ><span>關(guān)于我們</span></a></li>
    <li><a ><span>每日看價(jià)</span></a></li>
    <li><a ><span>找個(gè)買家</span></a></li>
    <li class='last'><a ><span>聯(lián)系我們</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>

效果：

主頁主要功能部分：