技术标签: datatables增删改查php
js相关:jQuery+datatables插件实现ajax加载数据与增删改查功能示例
发布于 2020-3-24|
复制链接
摘记: 本文实例讲述了jQuery+datatables插件实现ajax加载数据与增删改查功能。分享给大家供大家参考,具体如下:这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查注意,需要引入jquery、datatables、layerhtml代码:
```xhtml
..
本文实例讲述了jQuery+datatables插件实现ajax加载数据与增删改查功能。分享给大家供大家参考,具体如下:这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查注意,需要引入jquery、datatables、layerhtml代码:
```xhtml
�o 搜索
�y 新增
�� 编辑
�� 删除
职业
姓名
性别
爱好
```
js代码:
```javascript
//点击查找
$("#search").click(function () {
table.ajax.reload();
});
//初始化datatables
var table = $('#example').DataTable({
"searching": false,
"serverSide": true,
"bProcessing": true,
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能
"sPaginationType": "full_numbers",
"fnServerData": function (sSource, aoData, fnCallback) {
var json = {
"page": {
"start": aoData[3].value,
"length": aoData[4].value,
},
"search": {
"xb": $("#searchTitle").val()
}
};
$.ajax({
"dataType": 'json',
"type": "POST",
"url": server + "user/queryUser.do",
"contentType": "application/json; charset=utf-8",
"data": JSON.stringify(json),
"success": function (data) {
data.recordsTotal = data.page.recordsTotal;
data.recordsFiltered = data.page.recordsTotal;
fnCallback(data);
}
});
},
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉, 没有找到",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
},
"aoColumns": [
{"data": "zy"},
{"data": "xm"},
{"data": "xb"},
{"data": "fov"}
]
});
///
//增加
$("#add").click(function () {
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
btn: ['确定'],
yes: function (index, layero) {
var json = {
"zy": $("#zhiy").val(),
"xm": $("#name").val(),
"xb": $("#sex").val(),
"fov_ck": $("#aihao").val()
};
$.ajax({
type: "POST",
url: server + "user/addUser.do",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(json),
dataType: "json",
success: function (data) {
if (data.success == true) {
layer.msg(data.msg);
} else if (data.success == false) {
layer.msg(data.msg);
}
}
});
layer.close(index);
table.ajax.reload();
},
content: '职业:' + '' + '姓名:'
+ '' + '性别:'
+ '' + '爱好:'
+ ''
});
});
//选中一行触发
$('#example tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
adatid = "";
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
adatid = table.row(this).data().guid;
adata = table.row(this).data().zy;
bdata = table.row(this).data().xm;
cdata = table.row(this).data().xb;
ddata = table.row(this).data().fov;
}
});
//修改
$("#change").click(function () {
if (adatid === '') {
alert("请选中要修改的数据");
} else {
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
btn: ['确定'],
yes: function (index, layero) {
var json = {
"guid": adatid,
"zy": $("#cid").val(),
"xm": $("#cname").val(),
"xb": $("#csex").val(),
"fov_ck": $("#cage").val()
};
$.ajax({
type: "POST",
url: server + "user/updateUser.do",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(json),
dataType: "json",
success: function (data) {
if (data.success == true) {
layer.msg(data.msg);
} else if (data.success == false) {
layer.msg(data.msg);
}
}
});
layer.close(index);
table.ajax.reload();
},
content: '职业:' + '' + '姓名:'
+ '' + '性别:'
+ '' + '爱好:'
+ ''
});
}
$("#cid").val(adata);
$("#cname").val(bdata);
$("#csex").val(cdata);
$("#cage").val(ddata);
});
//删除
$("#del").click(function () {
if (adatid === '') {
alert("请删除要修改的数据");
} else {
var json = {
"guid": adatid
};
$.ajax({
type: "POST",
url: server + "user/deleteUser.do",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(json),
dataType: "json",
success: function (data) {
if (data.success == true) {
layer.msg(data.msg);
} else if (data.success == false) {
layer.msg(data.msg);
}
}
});
table.ajax.reload();
}
});
```
文章浏览阅读281次。Consumer 题目链接:HDU - 3449 题意:FJ要去购物,买的商品要用箱子装起来,每个箱子装不同的商品,问FJ能获得的最大价值;只有先买了箱子,才能买固定的物品,所以这是个有依赖的背包问题,对于每个箱子内的物品一定是按01背包看是否要买;对于每个箱子有两个状态,买,不买;买了就必定买了对应商品,那么买了这一箱子后,用剩下的钱买商品;#include <bit..._consumer hdu3449
文章浏览阅读237次。主要分为两个部分:创建DLL文件,调用DLL文件。Note: BCB运行环境:2010 C++ Builder XE创建DLL文件Step1 创建DLL Projecta.1双击BCB软件,接着依次选择:File→New→Other,跳出如下dialoguebox:a.2或者在右侧点击,add new project,跳出如下dialoguebox:b. 选择“Dy..._bcb封装窗口类dll
文章浏览阅读3.5k次。如果想让我们的2D图片动起来可以使用插件在SD中进行加工让图片动起来。这是一个可以从单个图像创建深度图,现在也可以生成3D立体图像对的插件,无论是并排还是浮雕。生成的结果可在3D或全息设备(如VR耳机或Looking Glass显示器)上查看,也可用于具有位移修改器的平面在渲染引擎或游戏引擎中使用,甚至可用于3D打印。Stable Diffusion 用2D图片制作3D动态壁纸。_stable-diffusion-webui-depthmap-script
文章浏览阅读307次,点赞4次,收藏9次。计算机专业的学生学习量化金融CQF(Certificate in Quantitative Finance)是一个很好的选择,取决于个人的职业规划、兴趣和目标。
文章浏览阅读1k次。@IT程序猿 微博网友评论:@Belenguar:这是一位程序员在马桶上长达几个小时的思考中领悟出来的?@梁月vv:我以为电影座椅呢。@伯于艾克:难怪我一直没理解,我把他..._null和empty
文章浏览阅读1.4k次。xman_2019_format首先检查一下程序的保护机制然后用IDA分析一下存在一个后门函数s执行的内存是非栈上,这类格式化字符串漏洞,一般需要先泄露栈地址,但是这里无法做到,如果泄露了,第二次也没机会来再次利用了。因为这里是一次输入,分步执行。没有循环的交互。因此,最简单的方法是爆破栈的低1字节。通过栈上已有的数据,在栈上布下一个指向函数返回地址栈的指针,然后劫持返回地..._ctf 格式化字符串 只能利用一次
文章浏览阅读1.2k次,点赞47次,收藏38次。本篇文章将介绍如何用RIDE写自动化脚本。RIDE(Robot Framework Integrated Development Environment)是一个基于Python编写的开源工具,专门用于Robot Framework自动化测试的开发、编辑和执行。作为一个图形化开发环境,RIDE提供了直观的用户界面,旨在简化自动化测试项目的创建和管理。_ride 自动化 app
文章浏览阅读2.6k次,点赞5次,收藏17次。四种自定义圆形ImageView的方法BitmapShader: 使用着色器Xfermode:使用图层叠加ClipPath:通过对画布裁剪的方式RoundedBitmapDrawable: 系统API圆角类前面三种是通过继承ImageView重写onDraw()方法实现最后一种是系统API直接使用。每一种方式都能实现显示圆形图片, 我们主要从以下几个方面来比较各个方式的不同实现方式难易空白的背景抗锯齿的能力第1种方式:BitmapShader实现通过对Pain_android 圆形imageview
文章浏览阅读546次。入门实例1先建个动态项目2配置web.xml:配置IOC容器applicationContext.xml的路径和初始化配置调度控制器DispatcherServlet<?xml version="1.0" encoding="UTF-8"?><web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/java..._public modelandview getrole(@requestparam("id") long id) { role role = roles
文章浏览阅读653次。简单语句所谓语句,就相当于自然语言中的句子,是c++的一个编译单位。一个语句中可以只有一个操作,如“i++”,也可以有好多操作,如“da+b+c”,其中有赋值,又有几个加法。几个语句也可以组成条件控制和循环控制的语句结构,因此语句就只是一个单位而已,我们不要用固定思维来看他。空语句c++中大多数的语句都以分号(;)结尾,而前面空无一物的分号也可以称为空语句(null),空语句在编译中会被当成一个语句,但他并没有什么作用。最常见的空语句就是for循环的头部定义的三个语句,在看到for循环的省略形式时就会_c++复合语句和基本语句地位相同吗
文章浏览阅读2.3k次,点赞5次,收藏10次。serialVersionUID - 0x0e 76 fa 9f 59 73 be c6 是16进制转换为二进制,就是生成的值transient修饰的变量不能被序列化;transient只作用于实现 Serializable 接口;transient只能用来修饰普通成员变量字段;不管有没有 transient 修饰,静态变量都不能被序列化;_java序列化和反序列化
文章浏览阅读2.9k次,点赞14次,收藏15次。联邦学习和安全多方计算都是解决数据隐私保护问题的技术,两者既有联系又有区别。本文针对两种的基本概念、应用场景、区别与联系进行了详细介绍。_联邦学习与安全多方计算