juqery datatable ajax请求后台数据 并为表格添加操作列

1.html部分：

<table id="example1" class="table table-bordered">
    <thead>
    <tr>
        <th>id</th>
        <th>图名称</th>
        <th>图大小</th>
        <th>是否集群模式</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody id="task_data_info">

    </tbody>
</table>


2.js部分：
$(function () {
    datatable();
})
//datatable插件页面加载时加载数据
function datatable() {
    $('#example1').dataTable({
        "bPaginage": true,
        "sPaginationType": "full_numbers",
        "sAjaxSource": "/graph_manag.action",
        "oLanguage": {
            "sLengthMenu": "每页显示 _MENU_ 条",
            "sZeroRecords": "没有找到符合条件的数据",
            "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
            "sInfoEmpty": "没有记录",
            "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
            "sSearch": "搜索",
            "sProcessing": "数据加载中...",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "下一页",
                "sLast": "尾页"
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "graphname"},
            {"mData": "storageSize"},
            {"mData": "iscluster"},
            {
                "sDefaultContent": "",//添加空列存放操作列
                fnRender: function (obj) {
                    var name = obj.aData.id;
                    return "<button class='manage-btn btn red btn-outline btn-sm' οnclick='del_graph(" + name + ")'>删除</button>" +
                            "<button class='manage-btn btn red btn-outline btn-sm' οnclick='add_graph(" + name + ")'>添加索引</button>";
                }
            },
        ],
        /* //添加操作列方式二：通过回调函数添加
         "fnRowCallback": function (nRow, aData, iDisplayIndex) {//当创建了行，但还未绘制到屏幕上的时候调用，通常用于改变行的class风格
         var name = aData.graphname;
         $('td:eq(3)', nRow).html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
         "<button class='manage-btn btn red btn-outline btn-sm' οnclick='del_graph(" + 'aa' + ")'>删除</button>" +
         "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
         "<button class='manage-btn btn red btn-outline btn-sm' οnclick='add_graph(" + name + ")'>添加索引</button>");
         return nRow;
         },*/

    });
}
function del_graph(a) {
    alert(a)
    if (window.confirm('你确定要删除图信息吗？')) {
        $.ajax({
            type: "get",
            url: "/del_graph.action",
            async: false,
            data: {name: a},
            dataType: "json",
            success: function (data) {
                alert("删除成功");

                window.location.href = "/graph_management.action";
            },
            error: function (data) {
                alert("删除失败");
            }
        });
        return true;
    } else {
        return false;
    }
}

function add_graph(a) {
    alert(a)
}


3.后台返回数据的数据格式
{ "aaData":[
           { "id" : 25543254345325,"graphname" : "aaa", "storageSize" : 12288, "iscluster" : false, "dataSize" : 0 },
           { "id" : 43242354325432, "graphname" : "ludian_jm", "storageSize" : 37601280, "iscluster" : false, "dataSize" : 103696079 },
           { "id" : 35432543254325432, "graphname" : "lvdian", "storageSize" : 40783872, "iscluster" : true, "dataSize" : 103696079 },
           { "id" : 4543254325325, "graphname" : "ts_ld_gnlk", "storageSize" : 29380608, "iscluster" : true, "dataSize" : 36019005 }
]}

4.后台程序
//请求图信息列表
@RequestMapping(value = "/graph_manag.action", produces = "application/json;charset=utf-8")
@ResponseBody
public String graph_manag() throws CAsitgdException {
    System.out.println("访问图管理界面的图信息action");
    client = CAsitClientFactory.getInstance("", confin);
    graph = client.getGraph();
    List<String> g_name = client.getAllGraphInfo();
    String datastr = "{ \"aaData\":[{ \"id\" : 25543254345325,\"graphname\" : \"aaa\", \"storageSize\" : 12288, \"iscluster\" : false, \"dataSize\" : 0 }," +
            " { \"id\" : 43242354325432, \"graphname\" : \"ludian_jm\", \"storageSize\" : 37601280, \"iscluster\" : false, \"dataSize\" : 103696079 }, " +
            "{ \"id\" : 35432543254325432, \"graphname\" : \"lvdian\", \"storageSize\" : 40783872, \"iscluster\" : true, \"dataSize\" : 103696079 }," +
            "{ \"id\" : 4543254325325, \"graphname\" : \"ts_ld_gnlk\", \"storageSize\" : 29380608, \"iscluster\" : true, \"dataSize\" : 36019005 }]}";
    System.out.println(com.newcosoft.util.fastjson.JSON.toJSON(datastr));
    return com.newcosoft.util.fastjson.JSON.toJSON(datastr).toString();
}
5.注意问题
仔进行按钮操作时只能传数字格式的数据