columns中的render属性可以渲染(处理)数据显示在表格中,即它可以操作从数据源读取到的数据,这个属性非常常用,可以通过它实现很多开发中常用的效果,比如表格第一列的checkbox,表格中头像的图片,最后一列添加操作按钮等,下面会给出相应的例子。
render方法有四个参数,分别为data、type、row、meta,其中主要是使用data和row来进行操作,data是对应当前cell的值,row是对应当前行中的所有cell的值。
1. 将第一列显示为checkbox
可以在columns属性中实现,也可以在columnDefs属性中实现。
columns: [{
"data": "name",
"orderable": false,
"width": "2%",
"render": function(data,type,row,meta){
return data = '<input type="checkbox" name="'+data+'">';
}
},
columnDefs: [{
// 指定第四列,从0开始,0表示第一列,1表示第二列……
"targets": 3,
"render": function(data, type, row, meta) {
return '<input type="checkbox" name="checklist" value="' + row.name + '" />'
}
}],
用上面代码将第一列和第四列显示为checkbox,效果如下:
2. 在表格某列显示图片
显示图片的需求大多是用来显示头像,实现的方法也和1
中一样有两种,主要是render对应函数里的实现不同。
{
"data": "img",
"width": "200px",
"title": "Avatar",
render: function (data, type, row, meta) {
return "<img src='" + data + "' />";
//还可以给图片加上超链接
//return "<a href='" + data + "'>" + data + "</a>";
}
}
3. 在最后一列添加操作按钮
这是一个非常常见的需求,在最后一列添加一些增删改查操作的按钮。
{
"data": "id",
"orderable": false, // 禁用排序
"defaultContent": "",
"width": "10%",
"render": function (data, type, row, meta) {
return data = '<button class="btn btn-info btn-sm" data-id=' + data + '><i class="fa fa-pencil"></i>Edit</button>'
+ '<button class="btn btn-danger btn-sm" data-id=' + data + '><i class="fa fa-trash-o"></i>Delete</button>';
}
}
效果如下图:
4. 字符太长截取显示
当某一列内容太长时只显示部分,超过用...
表示。
columns: [{
data: "content",
render: function(data, type, row, meta) {
//type 的值 dispaly sort filter
//代表,是显示类型的时候判断值的长度是否超过8,如果是则截取
//这里只处理了类型是显示的,过滤和排序返回原始数据
if (type === 'display') {
if (data.length > 8) {
return '<span title="' + data + '">' + data.substr(0, 7) + '...</span>';
} else {
return '<span title="' + data + '>' + data + '</span>';
}
}
return data;
}
}]
还可以使用css的方法实现,即给当前列添加相应的css样式:
/* 单元格连续纯字母数字强制换行显示 */
.wordwrap{
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
/* 超长文字单元格省略号显示 */
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
columns: [
{
data: "content",
class: "wordwrap ellipsis"
}
]
5. 根据性别的不同添加相应样式
在用datatables做用户信息列表时经常需要显示性别,可以根据性别字段来做一定的转换,比如添加颜色样式,或者变成对应的男生女生图标等。
{
"data" : "gender",
"orderable" : false, // 禁用排序
"defaultContent" : "",
"width" : "1%",
"class": "gender_style",//给当前列添加样式
"render": function (data, type, full, meta) {
if(data=="male"){
return data = '<i class="fa fa-male"></i>';
}else{
return data = '<i class="fa fa-female"></i>';
}
}
}
效果如下:
参考资料:
http://datatables.club/reference/option/columns.render.html
http://datatables.club/manual/daily/2016/04/25/option-columns-render1.html
http://datatables.club/manual/daily/2016/04/26/option-columns-render2.html
http://datatables.club/manual/daily/2016/04/27/option-columns-render3.html
http://datatables.club/manual/daily/2016/04/28/option-columns-render4.html