django与ajax：ajax结合sweetalter ，批量插入数据 ；分页器组件
一、ajax结合sweetalter
"""
如果是ajax进行前后端交互，通常后端会返回给ajax一个字典
"""
ajax结合sweetalter实现点击删除按钮时，弹出提示框，提现用户是否真的要删除，点击”确定“删除，点击”取消“返回。并且在不刷新页面的情况下，不显示被删除的那一行。
首先sweetalter是第三方组件，要先下载导入或者使用cdn的
实例
前端步骤：实例代码中的注释对应下面的4个步骤
展示完信息后，删除按钮中添加自定义属性来获取当前这条数据的主键值——》
给删除按钮绑定点击事件，事件函数内部书写模态框代码（模态框代码模板直接从Bootstrap的组件中拷贝，再根据需求修改）——》
在模态框代码的确定按钮中加入ajax请求。——》
用户点击模态框中的确定时，执行DOM操作，将我们要删除的那个
tr标签移除即可。
# 前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'dist/sweetalert.min.js' %}"></script>
<style>
div.sweet-alert h2 {
padding: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">数据展示</h2>
<br>
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>年龄</th>
<th>性别</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
{% for userObj in user_queryset %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ userObj.username }}</td>
<td>{{ userObj.age }}</td>
<td>{{ userObj.get_gender_display }}</td>
<td class="text-center">
<a href="#" class="btn btn-primary btn-sm">编辑</a>
<!--******************** 1.添加自定义属性获取主键值 ***************-->
<a href="#" class="btn btn-danger btn-sm cancel" userId = {{ userObj.pk }}>删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
<!--******************** 1.绑定点击事件 ***************-->
$('.cancel').click(function () {
var $btn = $(this);
<!--******************** 模态框 ***************-->
swal({
title: "你确定要删吗?",
text: "你如果删了，你就准备好直接跑路吧!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "是的，老子就要删!",
cancelButtonText: "算了算了，不敢!",
closeOnConfirm: false,
closeOnCancel: false,
showLoaderOnConfirm: true
},
<!--************* 3.在模态框代码的确定按钮中加入ajax请求 ***************-->
function (isConfirm) {
if (isConfirm) {
// 朝后端发送ajax请求
$.ajax({
url:'',
type:'post',
data:{'delete_id':$btn.attr('userId')},
success:function (back_data) {
if(back_data.code==1000){
swal("准备跑路把!", back_data.msg, "success");
<!--********* 4.执行DOM操作，将对应的tr标签移除 ***********-->
$btn.parent().parent().remove()
}else{
swal("有Bug", "发什么了未知的错误!", "warning");
}
}
});
} else {
swal("怂逼", "数据都不敢删", "error");
}
});
})
</script>
</body>
</html>
# 后端：
import time
def home(request):
if request.is_ajax():
back_dic = {'code':1000,'msg':'数据已经被我删掉了'}
delete_id = request.POST.get('delete_id')
time.sleep(3)
models.User.objects.filter(pk=delete_id).delete()
return JsonResponse(back_dic) # 后端返回到前端的json格式数据，前端会自动反序列化成JS对象，因此在上面的ajax回调函数中可以直接使用back_data.code 和 back_data.msg
user_queryset = models.User.objects.all()
return render(request,'home.html',locals())
二、bulk_create批量插入数据
django的orm中，当直接批量插入大量数据时，效率非常低，并且会中途中断。
这是django就有一个方法
bulk_create，来帮我们实现批量插入数据，这个方法不仅可以成功插入大量数据，且效率也很高。实例
def index(request):
# for i in range(1000):
# models.Book.objects.create(title='第%s本书'%i) # 直接插入，效率低，中间会中断
book_list = []
for i in range(100):
book_list.append(models.Book(title='第%s书'%i))
# 批量插入数据 建议使用bulk_create方法
models.Book.objects.bulk_create(book_list)
三、简易版分页器推导
1. 推导步骤
首先获取全部要展示的数据对象，统计总数
all_count = book_queryset.count()
事先决定每页展示多少条数据，再计算总共分了多少页（使用python自带的取整取余内置方法
divmod()）per_page_num = 10 # 每页展示多少条数据 all_count = book_queryset.count()
all_page_num,more = divmod(all_count,per_page_num)
if more:
all_page_num += 1 # 总共分了多少页 # 用户想要查看的页码
current_page = request.GET.get('page', 1)
current_page = int(current_page)决定每个页面上展示多少个页码给用户，并是用户每次点击的页码高亮显示且处于这些展示出来的页码的中间。（此时要对最前面的几页和最后面的几页做一个判断，这里我们就只演示对最前面的几页做判断）
# 决定每个页面上展示多少个页码给用户,用户每次点击的页码处于这些展示出来的页码的中间
start_page = (current_page - 1) * per_page_num
end_page = current_page * per_page_num html = ''
# 对最前面的几页和最后面的几页做一个判断
xxx = current_page
if current_page < 6:
xxx = 6
for i in range(xxx-5,xxx+6):
if current_page == i:
# 用户每次点击的页码高亮
html += '<li class="active"><a href="?page=%s">%s</a></li>'%(i,i)
else:
html += '<li><a href="?page=%s">%s</a></li>' % (i, i)
确定每页展示哪些数据
book_queryset = book_queryset[start_page:end_page] # 顾头不顾尾（支持索引取值和索引切片）
return render(request, 'index.html', {'xxx':book_queryset})
四、自定义分页器的使用
1. 自定义分页器模板
class Pagination(object):
def __init__(self,current_page,all_count,per_page_num=2,pager_count=11):
"""
封装分页相关数据
:param current_page: 当前页
:param all_count: 数据库中的数据总条数
:param per_page_num: 每页显示的数据条数
:param pager_count: 最多显示的页码个数
用法:
queryset = model.objects.all()
page_obj = Pagination(current_page,all_count)
page_data = queryset[page_obj.start:page_obj.end]
获取数据用page_data而不再使用原始的queryset
获取前端分页样式用page_obj.page_html
"""
try:
current_page = int(current_page)
except Exception as e:
current_page = 1
if current_page <1:
current_page = 1
self.current_page = current_page
self.all_count = all_count
self.per_page_num = per_page_num
# 总页码
all_pager, tmp = divmod(all_count, per_page_num)
if tmp:
all_pager += 1
self.all_pager = all_pager
self.pager_count = pager_count
self.pager_count_half = int((pager_count - 1) / 2)
@property
def start(self):
return (self.current_page - 1) * self.per_page_num
@property
def end(self):
return self.current_page * self.per_page_num
def page_html(self):
# 如果总页码 < 11个：
if self.all_pager <= self.pager_count:
pager_start = 1
pager_end = self.all_pager + 1
# 总页码 > 11
else:
# 当前页如果<=页面上最多显示11/2个页码
if self.current_page <= self.pager_count_half:
pager_start = 1
pager_end = self.pager_count + 1
# 当前页大于5
else:
# 页码翻到最后
if (self.current_page + self.pager_count_half) > self.all_pager:
pager_end = self.all_pager + 1
pager_start = self.all_pager - self.pager_count + 1
else:
pager_start = self.current_page - self.pager_count_half
pager_end = self.current_page + self.pager_count_half + 1
page_html_list = []
# 添加前面的nav和ul标签
page_html_list.append('''
<nav aria-label='Page navigation>'
<ul class='pagination'>
''')
first_page = '<li><a href="?page=%s">首页</a></li>' % (1)
page_html_list.append(first_page)
if self.current_page <= 1:
prev_page = '<li class="disabled"><a href="#">上一页</a></li>'
else:
prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,)
page_html_list.append(prev_page)
for i in range(pager_start, pager_end):
if i == self.current_page:
temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)
else:
temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)
page_html_list.append(temp)
if self.current_page >= self.all_pager:
next_page = '<li class="disabled"><a href="#">下一页</a></li>'
else:
next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,)
page_html_list.append(next_page)
last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,)
page_html_list.append(last_page)
# 尾部添加标签
page_html_list.append('''
</nav>
</ul>
''')
return ''.join(page_html_list)
2. 使用方法
- 在app文件夹下新建一个utils文件夹，在utils文件夹下新建一个任意名字的py文件（如：mypage.py）
- 将上面的自定义分页器模板代码拷贝到该py文件中
- 在需要分页的功能函数中导入
from app01.utils.mypage import Pagination
（1）后端代码和前端代码
- 注意：在前端代码中，将所有的
book_queryset对象换成page_queryset对象
# 后端代码：
def index(request):
# 自定义分页器的使用
book_queryset = models.Book.objects.all()
current_page = request.GET.get('page',1)
all_count = book_queryset.count()
page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10,pager_count=5)
page_queryset = book_queryset[page_obj.start:page_obj.end] # 将book_queryset对象赋值给page_queryset
return render(request,'index.html',locals())
# 前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'dist/sweetalert.min.js' %}"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
{% for book in page_queryset %} <!--将页面上原本的queryset数据全部换成切片之后的queryset即可-->
<p>{{ book }}</p>
{% endfor %}
{{ page_obj.page_html|safe }}
</div>
</div>
</div>
</body>
</html>
django与ajax：ajax结合sweetalter ，批量插入数据 ；分页器组件的更多相关文章
- django ajax 及批量插入数据 分页器
``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...
- Django批量插入数据和分页器
目录 一.ajax结合sweetalert实现删除按钮动态效果 二.bulk_create批量插入数据 1. 一条一条插入 2. 批量插入 三.自定义分页器 一.ajax结合sweetalert实现删 ...
- Django orm 实现批量插入数据
Django ORM 中的批量操作 在Hibenate中,通过批量提交SQL操作,部分地实现了数据库的批量操作.但在Django的ORM中的批量操作却要完美得多,真是一个惊喜. 数据模型定义 首先,定 ...
- [Django高级之批量插入数据、分页器组件]
[Django高级之批量插入数据.分页器组件] 批量插入数据 模板层models.py from django.db import models class Books(models.Model): ...
- django----Sweetalert bulk_create批量插入数据 自定义分页器
目录 一.Sweetalert使用AJAX操作 二.bulk_create 三.分页器 divmod 分页器组件 自定义分页器的使用 一.Sweetalert使用AJAX操作 sweetalert ...
- C#批量插入数据到Sqlserver中的四种方式
我的新书ASP.NET MVC企业级实战预计明年2月份出版,感谢大家关注! 本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的 ...
- .Net批量插入数据到SQLServer数据库,System.Data.SqlClient.SqlBulkCopy类批量插入大数据到数据库
批量的的数据导入数据库中,尽量少的访问数据库,高性能的对数据库进行存储. 采用SqlBulkCopy来处理存储数据.SqlBulkCopy存储大批量的数据非常的高效,将内存中的数据表直接的一次性的存储 ...
- sql 中的Bulk和C# 中的SqlBulkCopy批量插入数据 （ 回顾 and 粗谈 ）
通常,我们会对于一个文本文件数据导入到数据库中,不多说,上代码. 首先,表结构如下. 其次,在我当前D盘中有个文本文件名为2.txt的文件. 在数据库中,可以这样通过一句代码插入. Bulk in ...
- Java 批量插入数据（Oracle）
//批量添加20000条数据用时8秒. try { String url = "jdbc:oracle:thin:@IP:1521:orcl"; // orcl为数据库的SI ...
随机推荐
- read: Connection reset by peer
造成此种问题的原因有多种,目前列下我所遇到过的. 1, sshfs usrname@172.23.65.122:/home/usrname ./122 在ubunutu 里面使用 sshfs 命令 映 ...
- python 爬虫 基于requests模块的get请求
需求:爬取搜狗首页的页面数据 import requests # 1.指定url url = 'https://www.sogou.com/' # 2.发起get请求:get方法会返回请求成功的响应对 ...
- sftp服务器配置
环境依赖:openssh-server >=4.8 //ssh -V 查看 安装环境: centos6,centos7 1.创建用户组 sftp groupadd sftp 2.创建登录用 ...
- C++面试题整理（持续更新中）
一. 内联函数和宏定义的区别 1.内联函数在运行时可调试,而宏定义不可以: 2.编译器会对内联函数的参数类型做安全检查或自动类型转换(同普通类型),而宏定义不会: 3.内联函数可以访问类的成员变量,而 ...
- 2019牛客暑期多校训练营（第二场）-D Kth Minimum Clique
题目链接:https://ac.nowcoder.com/acm/contest/882/D 题意:求给定点权无向图中,点权和第k小的完全子图的点权和.(包括空集) 思路:从空集开始,每找到一个完全子 ...
- Windows文件共享配置与遇到的问题
一.Windows 7 访问共享文件权限不足 问题 最近在 Windows 10 上共享了一个文件夹,并创建了一个用户,用于在别人访问该共享文件夹时进行认证,但是在一个同事的电脑(Windows7,当 ...
- 【Python】【基础知识】【内置函数】【dir的使用方法】
原英文帮助文档: dir([object]) Without arguments, return the list of names in the current local scope. With ...
- Linux下安装双JDK环境与双服务器
安装双JDK环境和双服务器,具体操作如下: (1)使用tar -xvf命令解压Tomcat: (2)在Tomcat服务器下的bin文件夹下的catalina.sh文件中的头部加入以下内容: (3)修改 ...
- 【图论好题】ABC #142 Task F Pure
题目大意 给定一个 $N$ 个点 $M$ 条边的有向图 $G$,无重边.自环.找出图 $G$ 的一个导出子图(induced subgraph) $G'$,且 $G'$ 中的每个点的入度和出度都是 1 ...
- 设计模式:职责链模式(Chain of Responsibility)
去年参加校招要到长沙来,这个对于我来说不是特别喜欢(但又必须的来,谁叫咱不是985.211的娃呢),但是对于某些人来说就是福音了.大四还有课,而且学校抓的比较严,所以对于那些想翘课的人来说这个是最好不 ...