单选按钮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 + '" />' } }]
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>'; } } }
columnDefs: [{ targets: 0, width: '50%', render: function(data, type, row, meta) { return '<input type="radio" name="radios">'; } } ],