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

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

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

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

HTML代码

rush:xhtml;">
搜索内容" id="searchTitle" type="text"/>
display" cellspacing="0" width="100%"> 职业

js代码

rush: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: '职业:' + '姓名:' + '性别:' + '爱好:' + '修改 $("#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程序设计有所帮助。

相关文章

jQuery表单验证提交:前台验证一(图文+视频)
jQuery表单验证提交:前台验证二(图文+视频)
jQuery如何实时监听获取input输入框的值
JQuery怎么判断元素是否存在
jQuery如何实现定时重定向
jquery如何获取复选框选中的值
姓名 性别 爱好