Django 简单实现分页与搜索功能的示例代码
作者:s_kangkang_A 发布时间:2023-12-26 01:40:16
标签:Django,分页,搜索
假设现有需求如下:
需要一个页面分页展示信息,在该页面添加搜索框以提供检索功能。
那么,我们知道,展示信息和检索功能是在同一个页面,也就是共用一个路由。
代码如下:
第一步,写路由:为了清晰,这里只给出主页和展示页面的路由。
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 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>
效果:
主页主要功能部分:
信息页分页与搜索:搜索框和分页都是存在的,目前是第一页:http://127.0.0.1:8000/other/profile
第二页:http://127.0.0.1:8000/other/profile?page=2
搜索测试:
搜索无效信息测试:
算是比较完整了。
来源:https://blog.csdn.net/s_kangkang_A/article/details/102911301


猜你喜欢
- 本人电脑是windows系统,装了Python3.7版本,但目前tensorflow支持最新的python版本为3.6,遂想再安装Pytho
- 为了自定义一个模板标签,你需要告诉Django当遇到你的标签时怎样进行这个过程。当Django编译一个模板时,它将原始模板分成一个个 节点
- 上次遇到一个需要打包下载批量图片的问题,找了一下发现这个好方法,记录一下。首先新建一个zipfile打包类:<?phpclass zi
- 前面章节我们介绍了如何选择优化的数据类型、如何高效的使用索引,这些对于高性能的MySQL来说是必不可少的。 但这些还完全不够,还需要合理的设
- 目录一.准备工作二.预览1.启动2.运行3.结果三.设计思路四.源代码4.1 GUI.py4.2 Search_Apps.py五.总结一.准
- Pandas读取大文件要处理的是由探测器读出的脉冲信号,一组数据为两列,一列为时间,一列为脉冲能量,数据量在千万级,为了有一个直接的认识,先
- 作者: wyh草样出处:https://www.cnblogs.com/wyh0923/p/14047466.html1、数据库配置类 Mo
- 数据集数据集为Barcelona某段时间内的气象数据,其中包括温度、湿度以及风速等。本文将简单搭建来对风速进行预测。特征构造对于风速的预测,
- 本文实例讲述了PHP基于非递归算法实现先序、中序及后序遍历二叉树操作。分享给大家供大家参考,具体如下:概述:二叉树遍历原理如下:针对上图所示
- 这是一个非常简单的解决方案,柱状图中每一条柱都是一个 div,数据的大小呈现在 div 的宽或高上。 查看演示 例子下载实现的原理
- 一个线上项目报的死锁,简要说明一下产生原因、处理方案和相关的一些点.1、背景这是一个类似数据分析的项目,数据完全通过LOAD DATA语句导
- 本教程为大家分享了mysql5.7.17安装配置方法,供大家参考,具体内容如下操作 全允许精彩专题分享:mysql不同版本安装教程 mysq
- 一个网站空间,但是却可以实现多个域名的访问的一段ASP代码:<%if Request.ServerVariables("SE
- 本文介绍MySQL查看数据库表容量大小的命令语句,提供完整查询语句及实例,方便大家学习使用。 1.查看所有数据库容量大小select tab
- 本文实例讲述了Python使用matplotlib简单绘图。分享给大家供大家参考,具体如下:# -*- coding:utf-8 -*-#!
- vue实现一个分页组件vue-paginaitonvue使用了一段时间的感触就是,我再也不想直接操作DOM了。数据绑定式的编程体验真是好。实
- 前言有时候在使用Python处理比较耗时操作的时候,为了便于观察处理进度,这时候就需要通过进度条将处理情况进行可视化展示,以便我们能够及时了
- 以前见过一个很漂亮的网页提示信息,就是把鼠标放到网页的文字或者图片上面就会有提示的那种透明的,还带个箭头,很漂亮,不知道谁在哪见过没有,感谢
- 在写python程序时,对于可变对象和不可变对象这里理解不深,导致总会犯一些细节错误。以下面的程序举例:ab = {'a':
- 我们经常会遇到多重查询问题,而长长的SQL语句往往让人丈二和尚摸不着头脑。特别是客户端部分填入查询条件时,如用普通方法将更是难上加难。以下巧