Datatables學習筆記——columns.render

風靈使發表於2018-08-01
筆記

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>';
                        }
                    }
                }

效果如下：

這裡寫圖片描述

相關文章