option columns.defaultContent 给单元格默认内容

DataTables中文网 4 May 2016

Tags: 不定时一讲


参数详解连接 columns.defaultContentOption columns.defaultContent不定时一讲

给单元格设置静态默认内容,这个属性不得不说是非常有用的,提到这个大家还可以看看

columns.renderOption columns.render 1不定时一讲 columns.render 2不定时一讲 columns.render 3不定时一讲 columns.render 4不定时一讲 属性,想要弄得更复杂点,全靠它了

我们返回的数据不能保证都是正常的,可能包含 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>"
    }
  ]
} );

如果大家也有小技巧和使用经验,欢迎给我发邮件 thxopen@datatables.club


百度站内搜索

Google站内搜索

赞助我们

赞助我们

您的支持,将是我们前进的最大动力……