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>    '
+'<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>    <a id=\"edit\" href=\"#\">修改</a>    <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":
4000
"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>    <a id=\"edit\" href=\"#\">修改</a>    <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

}

}

]

}