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
}

}
]
}