datatables 给字段设置默认值,屏蔽没有字段的错误

我们返回的数据不能保证都是正常的,可能包含 null ,显然这个对于最终用户来说是不友好的,那么我们可以这么处理

先有如下数据格式:

//示例数据

{
    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>"
    }
  ]
} );

或者更简单,粗暴的处理:

$('#example').DataTable( {
  "columns": [
    null,
    null,
    null,
    {
      "data": "office",
      // 如果上面数居中office对于的值为 null 或者 undefined 则直接显示为空字符串

      "defaultContent": ""
    }
  ]
} );

当然 defaulContent 的用法还可以再强大点,比如给最后一列添加编辑按钮

//使用 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.html

posted @ 2019-03-11 13:48  y-xs  阅读(1047)  评论(0编辑  收藏  举报