参数详解连接
columns.defaultContentOption
给单元格设置静态默认内容，这个属性不得不说是非常有用的，提到这个大家还可以看看
columns.renderOption
属性，想要弄得更复杂点，全靠它了
我们返回的数据不能保证都是正常的，可能包含 null ，显然这个对于最终用户来说是不友好的，那么我们可以这么处理
先有如下数据格式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//示例数据
{
data:[
{"id":1,"email":"thxopen@datatables.club","office":"Chengdu","first_name":null}
]
}
$('#example').DataTable( {
"columns": [
null,
null,
null,
{
"data": "first_name",
// 为 null 或者 undefined 给出友好的提示， 还没有设置
"defaultContent": "<i>还没有设置</i>"
}
]
} );
或者更简单，粗暴的处理：
1
2
3
4
5
6
7
8
9
10
11
12
$('#example').DataTable( {
"columns": [
null,
null,
null,
{
"data": "office",
// 如果上面数居中office对于的值为 null 或者 undefined 则直接显示为空字符串
"defaultContent": ""
}
]
} );
当然 defaulContent 的用法还可以再强大点，比如给最后一列添加编辑按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//使用 columnDefs 指定
$('#example').DataTable( {
"columnDefs": [
{
"data": null,
"defaultContent": "<button>编辑</button>",
"targets": -1 // 这里 -1 代表最后一列
}
]
} );
// 使用 columns 指定
$('#example').dataTable( {
"columns": [
null,
null,
null,
{
"data": null,
"defaultContent": "<button>编辑</button>"
}
]
} );
