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

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

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

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

html代码：

? 搜索

? 新增

? 编辑

? 删除

职业姓名性别爱好

js代码：

//点击查找

$("#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();

}

});

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