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

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

2019-01-08

编程之家

https://www.jb51.cc

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

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

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

搜索内容" id="searchTitle" type="text"/>

新增

编辑

职业

姓名

性别

爱好

js代码：

翻页功能

"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: '职业：' + '姓名：'

+ '性别：'

+ '爱好：'

+ '修改

$("#change").click(function () {

if (adatid === '') {

alert("请选中要修改的数据");

} else {

layer.open({

type: 1,//加上边框

area: ['420px',//宽高

btn: ['确定'],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",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: '职业：' + '姓名：'

+ '性别：'

+ '爱好：'

+ '删除

$("#del").click(function () {

if (adatid === '') {

alert("请删除要修改的数据");

} else {

var json = {

"guid": adatid

};

$.ajax({

type: "POST",url: server + "user/deleteUser.do",success: function (data) {

if (data.success == true) {

layer.msg(data.msg);

} else if (data.success == false) {

layer.msg(data.msg);

}

}

});

table.ajax.reload();

}

});

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》

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

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。