参数详解连接
columns.renderOption
昨天暂且列出了7个问题，今天讲第二个，怎么在表格的最后一列，添加自定义的按钮，比如说【删除】
同样是如下的数据：
1
2
3
4
5
6
{
data:[
{"name":"DataTables中文网","age":2,"id":1},
{"name":"DataTables中文网2","age":3,"id":2}
]
}
如果要删除一条数据，我们一般是根据id来操作，因为他是唯一的
js部分代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var table = $("#tableid").DataTable({
ajax: {
url: "data.json",
type: "POST"
},
columns: [{
data: "name"
},
{
data: "age"
},
{
data: null
}],
columnDefs: [{
// 指定第最后一列
targets: 2,
render: function(data, type, row, meta) {
return '<a type="button" href="#" onclick="del("' + row.id + '","' + row.name + '")" >删除</a>';
}
}]
});
//删除方法
function del(id, name) {
$.ajax({
url: "del.action",
//在后台接受id这个参数
data: {
id: id
},
success: function(data) {
if (data.flag) {
//如果后台删除成功，则刷新表格，并提示用户删除成功
//保留分页信息
table.ajax.reload(null, false);
alert(name + data.msg);
}
}
})
}
假设上面url：del.action?id=1成功的返回数据如下：
1
2
3
4
{
flag:true,
msg:"删除成功"
}
html代码：
1
2
3
4
5
6
7
<table id="tableid">
<thead>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</thead>
</table>
其实写了两个关于render的使用方法了，应该可以举一反三了，render是不是也没那么难呢？
