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">';
}
}
],
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count">5</span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.csdn.net/zxf1242652895"> <img src="https://profile.csdnimg.cn/2/D/8/3_zxf1242652895" class="avatar_pic" username="zxf1242652895"> <img src="https://g.csdnimg.cn/static/user-reg-year/1x/6.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.csdn.net/zxf1242652895" data-report-click="{"mod":"popu_379"}" target="_blank">i秋风伴落叶</a></span> </div> <div class="text"><span>发布了192 篇原创文章</span> · <span>获赞 283</span> · <span>访问量 61万+</span></div> </div> <div class="right-message"> <a href="https://bbs.csdn.net/topics/395529506" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div>
1017
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
