jQuery+datatables插件实现ajax加载数据与增删改查功能示例

2023-09-14 02:48:05 263

本文实例讲述了jQuery+datatables插件实现ajax加载数据与增删改查功能。分享给大家供大家参考，具体如下：

这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查

注意，需要引入jquery、datatables、layer

html代码：



o搜索
y新增
编辑
删除

职业姓名性别爱好

js代码：

//点击查找
$("#search").click(function(){
table.ajax.reload();
});
//初始化datatables
vartable=$('#example').DataTable({
"searching":false,
"serverSide":true,
"bProcessing":true,
"bPaginate":true,//翻页功能
"bLengthChange":true,//改变每页显示数据数量
"bFilter":true,//过滤功能
"bSort":false,//排序功能
"sPaginationType":"full_numbers",
"fnServerData":function(sSource,aoData,fnCallback){
varjson={
"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){
varjson={
"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);
}elseif(data.success==false){
layer.msg(data.msg);
}
}
});
layer.close(index);
table.ajax.reload();
},
content:'职业：'+''+'
姓名：'
+''+'
性别：'
+''+'
爱好：'
+''
});
});
//选中一行触发
$('#exampletbody').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){
varjson={
"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);
}elseif(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{
varjson={
"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);
}elseif(data.success==false){
layer.msg(data.msg);
}
}
});
table.ajax.reload();
}
});

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQueryform操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery+datatables插件实现ajax加载数据与增删改查功能示例

热门推荐

随机推荐