Datatables学习笔记——columns.render

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,348评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,122评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,936评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,427评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,467评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,785评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,931评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,696评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,141评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,483评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,625评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,291评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,892评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,492评论 2 348

推荐阅读更多精彩内容

  • 1.安装 需引入三个文件,即jQuery库,一个DT的核心js文件和一个DT的css文件,注意jQuery库的引用...
    co可丁阅读 1,854评论 0 9
  • 1. 如何开启服务器模式 服务器模式即通过ajax通过接口从后端获取数据,也是开发中最常使用的方式。开启服务器模式...
    co可丁阅读 2,239评论 0 4
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,732评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,304评论 0 11
  • 你是真的肤浅 看不穿誓言 总置身浪尖 一次次挑战 别人无心的永远 既然选择谎言 就不要拆穿 既然选择再见 就不必留...
    安静的复苏918阅读 157评论 0 0