碎碎念

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,效果如下:

將列顯示為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