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相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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