本文实例讲述了jQuery+datatables插件实现ajax加载数据与增删改查功能。分享给大家供大家参考,具体如下:
这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查
注意,需要引入jquery、datatables、layer
HTML代码:
搜索
内容" id="searchTitle" type="text"/>
翻页
功能
"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": "
首页","sPrev
IoUs": "前一页","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();
}
});