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程序设计有所帮助。


网站栏目:jQuery+datatables插件实现ajax加载数据与增删改查功能示例
文章地址:http://myzitong.com/article/gpddec.html