dataTable 最后一列添加选项操作

效果如图：

最下面是原来的方式，现在不建议使用这种方式来做，因为 dataTable中有一个更简单更容易让人理解的方式来做，即 render 进行数据渲染的方式，如下：

    "aoColumnDefs":[                    {//倒数第一列                        "targets":-1,                        "bSortable": false,                        render: function(data, type, row) {                            var html ='<button class="btn btn-xs jfedit btn-danger" value="'+row.tcId+'">编辑</button>&nbsp;&nbsp;&nbsp;&nbsp;'                            +'<button class="btn btn-xs btn-danger jfdelete" value="'+row.tcId+'">删除</button>';                            return html;                        }                    },                   ]

下面是原来我使用的方式，不建议使用如下方式了.

"aoColumnDefs":[//设置列的属性，此处设置第一列不排序              {"bSortable": false, "aTargets": [0]},              {"targets":-1,               "data": null,               "bSortable": false,               "defaultContent": "<p>&nbsp;&nbsp;&nbsp;&nbsp;<a id=\"edit\" href=\"#\">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a id=\"del\"  href=\"#\">删除</a></p>"         } 

在下面的时候可以进行操作：

/**    * 查看修改*/$('#charging_table tbody').on( 'click', 'a#edit', function () {   var data=$('#charging_table').DataTable().row($(this).parents('tr')).data();   alert("查看修改："+data.tenantName +","+ data.id );   } );/*** 删除*/$('#charging_table tbody').on( 'click', 'a#del', function () {   var data =$('#charging_table').DataTable().row($(this).parents('tr')).data();   alert("删除："+data );    })  

全部代码如下：

$('#charging_table').dataTable({    "language": {        "paginate": {            "previous": "上一页",            "next": "下一页"        },        "info": "显示_START_到_END_, 共计_TOTAL_条数据",        "emptyTable": "无记录",        "infoEmpty": "共计0",    },    /* 分页设置 */    "bPaginate": true,    "bLengthChange": false,    /* 搜索设置 */    "bFilter": true,    "bSort": false,    /* 显示总条数 */    "bInfo": true,    "bAutoWidth": false,    /*  数据源Ajax*/    "ajax":{ url:"findAll",},    "columns": [{"mData": "tenantName"},        {"mData": "serviceType"},           {"mData": "tenantType"},                 {"mData": "resourceTime"},      {"mData": "uniplatform4aTime"},     {"mData": "havedateTime"},                {"mData": "resideDuration"},    {"mData": "monthlyFee"},            {"mData": "dataFee"},                 {"mData": "beginRentDate"},     {"mData": "tasteDuration"},         {"mData": "chargeBeginDate"},                {"mData": "chargeEndDate"},     {"mData": "introduceUnicom"},       {"mData": "introduceTenant"},                 {"mData": "contact"},           {"mData": "askDate"},               {"mData": "signContract"},                {"mData": "monthlyFeeRemark"},  {"mData": "endRentDate"},           {"mData": "remark"},null                ],    "aoColumnDefs":[//设置列的属性，此处设置第一列不排序                    {"bSortable": false, "aTargets": [0]},                    {                        "targets":-1,                        "data": null,                        "bSortable": false,                        "defaultContent": "<p>&nbsp;&nbsp;&nbsp;&nbsp;<a id=\"edit\" href=\"#\">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a id=\"del\"  href=\"#\">删除</a></p>"                    }                 ],}); /*** 查看修改*/$('#charging_table tbody').on( 'click', 'a#edit', function () {   var data =   $('#charging_table').DataTable().row($(this).parents('tr')).data();   alert("查看修改："+data.tenantName +","+ data.id );   } );    /*** 删除*/$('#charging_table tbody').on( 'click', 'a#del', function () {   var data = $('#charging_table').DataTable().row($(this).parents('tr')).data();   alert("删除："+data );   })  

JSON返回格式如下：
{
data: [
{
introduceTenant: “”,
monthlyFeeRemark: “”,
resideDuration: “”,
serviceType: 10,
tenantType: 20,
chargeEndDate: “”,
beginRentDate: “”,
chargeBeginDate: “”,
remark: “”,
havedateTime: “42534”,
introduceUnicom: “”,
resourceTime: “201508”,
endRentDate: “”,
signContract: 20,
tenantName: “吉林信息化”,
contact: “”,
uniplatform4aTime: “42534”,
dataFee: null,
askDate: “201508”,
tasteDuration: “”,
tcId: 1,
monthlyFee: null
},
{
introduceTenant: “”,
monthlyFeeRemark: “”,
resideDuration: “”,
serviceType: 10,
tenantType: 20,
chargeEndDate: “”,
beginRentDate: “”,
chargeBeginDate: “”,
remark: “”,
havedateTime: “20160413”,
introduceUnicom: “”,
resourceTime: “20160413”,
endRentDate: “”,
signContract: 20,
tenantName: “河南创新租户”,
contact: “”,
uniplatform4aTime: “20160413”,
dataFee: null,
askDate: “20170412”,
tasteDuration: “”,
tcId: 2,
monthlyFee: null
}

}
]
}