datatable.js實現非同步載入與增刪改查

給大家分享一下我在專案中用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();
            }
        });