咱们返回的数据不能保证都是正常的,可能包含 null
,显然这个对于最终用户来讲是不友好的,那么咱们能够这么处理html
先有以下数据格式:spa
//示例数据
{ 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>" } ] } );
或者更简单,粗暴的处理:code
$('#example').DataTable( { "columns": [ null, null, null, { "data": "office", // 若是上面数居中office对于的值为 null 或者 undefined 则直接显示为空字符串
"defaultContent": "" } ] } );
固然 defaulContent
的用法还能够再强大点,好比给最后一列添加编辑按钮htm
//使用 columnDefs 指定
$('#example').DataTable( { "columnDefs": [ { "data": null, "defaultContent": "<button>编辑</button>", "targets": -1 // 这里 -1 表明最后一列
} ] } ); // 使用 columns 指定
$('#example').dataTable( { "columns": [ null, null, null, { "data": null, "defaultContent": "<button>编辑</button>" } ] } );
参考网址:http://datatables.club/manual/daily/2016/05/04/option-columns-defaultContent.htmlblog