datatables实现异步加载与增删改查

给大家分享一下我在项目中用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();
        }
    });