咱們返回的數據不能保證都是正常的,可能包含 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