欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-16 22:52:19
本文实例讲述了jquery+datatables插件实现ajax加载数据与增删改查功能。分享给大家供大家参考,具体如下: 这里给大家分享一下我在项目中用datatable...

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

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

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

html代码:

<div class="thead">
  <input placeholder="请输入搜索内容" id="searchtitle" type="text"/>
  <button id="search" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 搜索</button>
  <button id="add" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 新增</button>
  <button id="change" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 编辑</button>
  <button id="del" class="layui-btn layui-btn-small layui-btn-primary"><i class="layui-icon"></i> 删除</button>
</div>
<table id="table" class="display" cellspacing="0" width="100%">
  <thead>
  <tr>
    <th>职业</th>
    <th>姓名</th>
    <th>性别</th>
    <th>爱好</th>
  </tr>
  </thead>
</table>

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: '职业:' + '<input type="text" name="" id="zhiy" value=""/>' + '<br>姓名:'
      + '<input type="text" name="" id="name" value=""/>' + '<br>性别:'
      + '<input type="text" name="" id="sex" value=""/>' + '<br>爱好:'
      + '<input type="text" name="" id="aihao" value=""/>'
    });
});
//选中一行触发
$('#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: '职业:' + '<input type="text" name="" id="cid"/>' + '<br>姓名:'
        + '<input type="text" name="" id="cname"/>' + '<br>性别:'
        + '<input type="text" name="" id="csex"/>' + '<br>爱好:'
        + '<input type="text" name="" id="cage"/>'
      });
    }
    $("#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程序设计有所帮助。