Datatables——columns.render
阿新 • • 發佈:2019-02-08
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
{
"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>';
}
}
}
效果如下: