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

前端之家收集整理的这篇文章主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

HTML代码

搜索内容" 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程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/32758.html

猜你在找的jQuery相关文章

姓名 性别 爱好