dataTable columnDefs

布满荆棘的人生 2021-10-08 07:00 348阅读 0赞

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">';
    		        }
    		    } 
    		    ],