option columns.render 渲染列(4) 时间格式化、内容太多优化显示、一列显示多列值《不定时一讲》 DataTables中文网

发布时间：2025-08-25 05:38

参数详解连接 columns.renderOption columnDefs.targetsDT

今天继续由4群的小伙伴- 雨吴给大家讲解columns.render 的用法

第一个问题：时间格式化这个问题主要是代表一类需要自己写额外的js的问题：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Date.prototype.Format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; }

然后大家直接在 columns.render 里面调用这个方法就好(代码里面的注释是告诉大家问题归类的思路，因为很多人不知道自己的问题出在那里)

1 2 3 4 5 6 7 8

render: function(data, type, row, meta) { //先讲时间格式化 //这类问题主要给大家讲逻辑，因为都是类似的问题，类似的解决方案 //最基础的解决方案：一、直接在数据源就格式化为常见的格式（sql或者后台代码格式化）;二、在dt里面格式化; //在js格式化时间的三种方式，我这里示范一种 //具体方法的链接：http://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.html return (new Date(data)).Format("yyyy-MM-dd hh:mm:ss"); //date的格式 Thu Apr 26 2016 00:00:00 GMT+0800 }

第二个问题：内容太多用省略号代替、内容不换行，鼠标移上去显示详情这个问题主要是代表一些需要用css解决的问题：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

render: function(data, type, row, meta) { //然后是内容太多用。。。。表示、内容不换行，鼠标移上去显示详情 //这类问题最简单的肯定是使用css解决 // //1. table-layout: fixed 由于table-layout的默认值是auto， //即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了， //fixed一下就好了。（注意：此样式是关键） // //2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少， //都不会自动换行，此时多余的内容会在水平方向撑破单元格。 // //3. overflow: hidden 隐藏超出单元格的部分。 // //4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。 //这4个css样式都可以百度出来的,第一个是写在table标签里面的,2、3、4写在td里面 //假设这个tomuchcontent 就是本列的值 data var tomuchcontent = "asdasdaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd"; //我这里做个简单的示范 return '<div id="a" style="width:100px;height:100px;overflow: hidden;text-overflow: ellipsis;" '+ 'title="‘+tomuchcontent +’">‘+tomuchcontent +’</div>'; }

找到这个问题怎么解决就好解决了，直接就可以百度找到解决方案了

第三个问题：同时显示多个列的内容这个问题其实昨天已经讲过了，自己通过一些简单的逻辑判断然后返回自己需要的结果就好

1 2 3 4 5 6 7 8 9

render: function(data, type, row, meta) { //最后一个同时显示多个列的内容 //我对这个问题的理解是比方我有两个字段需要同时显示在一个td里面，或者一个td里面有两个按钮 //这个columns.data就完全可以给null了,相应的columns.render().data这里就也是null //按钮的就是自己在里面拼click事件以及对应的按钮样式了 //return '<a href="javascript:void(0);" onclick="del("'+row.id+'")">' + 删除 // + '</a><a href="javascript:void(0);" onclick="mod("'+row.id+'","'+row.name+'")">' + 编辑 + '</a>'; return '<label>' + row.id + '</label> <label>' + row.name + '</label>'; }

最后给大家讲解下columns.render和columnDefs.render的区别：

其实这个的区别，归根到底是columns和columndefs的区别，它们两个的区别就有

columns先执行，columnDefs后执行 columnDefs比columns多一个属性 columnDefs.targetsDT

有了这个属性就可以做很多columns做不到的事情

希望大家可以补充下，大家一起学习

针对第一点:

每一次 DataTables 的是重绘或者重载都会后台执行很多回调函数更多参考

columns.render是在createdRow前执行的 columnDefs.render是在rowCallback后执行的

就会导致columnDefs.render执行的时候其实tr已经全部渲染出来的，大家就可以对全局做一些操作了，如合并单元格、根据某个tr里面td改变另一个tr里面的td的渲染了等等

针对第二点：

就可以使一个columnDefs.render对应多个列了，或者在没有创建columns的时候使用，更加灵活，columns.render一对一的更加有针对性

两个option都有自己的特点，各有千秋，大家根据自己需求使用对应的option，祝大家对dt使用的更加得心应手！

下面是本节的完整代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="DataTables/css/jquery.dataTables.min.css" rel="stylesheet" /> </head> <body> <script src="DataTables/js/jquery.js"></script> <script src="DataTables/js/jquery.dataTables.min.js"></script> <table id="example"> </table> <script> Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; } var id = ""; var oTable = $("#example").DataTable({ "serverSide": true, //分页，取数据等等的都放到服务端去 "deferRender": true, //当处理大数据时，延迟渲染数据，有效提高Datatables处理能力 "destory": true, "ajax": { "dataType": 'json', "type": "POST", "url": "/GridSheet/dataGridData", "data": function(d) { d.id = id; }, "async": false }, "columns": [{ "data": "id", "width": "100px", "title": "id" }, { "data": "name", "width": "150px", "title": "姓名" }, { "data": "birthday", "width": "200px", "title": "生日", render: function(data, type, row, meta) { //先讲时间格式化 //这类问题主要给大家讲逻辑，因为都是类似的问题，类似的解决方案 //最基础的解决方案：一、直接在数据源就格式化为常见的格式（sql或者后台代码格式化）;二、在dt里面格式化; //在js格式化时间的三种方式，我这里示范一种 //具体方法的链接：http://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.html return (new Date(data)).Format("yyyy-MM-dd hh:mm:ss"); //date的格式 Thu Apr 26 2016 00:00:00 GMT+0800 } }, { "data": "a", "width": "350px", "title": "a", render: function(data, type, row, meta) { //然后是内容太多用。。。。表示、内容不换行，鼠标移上去显示详情 //这类问题最简单的肯定是使用css解决 // //1. table-layout: fixed 由于table-layout的默认值是auto， //即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了， //fixed一下就好了。（注意：此样式是关键） // //2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少， //都不会自动换行，此时多余的内容会在水平方向撑破单元格。 // //3. overflow: hidden 隐藏超出单元格的部分。 // //4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。 //这4个css样式都可以百度出来的,第一个是写在table标签里面的,2、3、4写在td里面 //假设这个tomuchcontent 就是本列的值 data var tomuchcontent = "asdasdaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd"; //我这里做个简单的示范 return '<div id="a" style="width:100px;height:100px;overflow: hidden;text-overflow: ellipsis;" '+ 'title="‘+tomuchcontent +’">‘+tomuchcontent +’</div>'; } }, { "data": null, "width": "350px", "title": "b", render: function(data, type, row, meta) { //最后一个同时显示多个列的内容 //我对这个问题的理解是比方我有两个字段需要同时显示在一个td里面，或者一个td里面有两个按钮 //这个columns.data就完全可以给null了,相应的columns.render().data这里就也是null //按钮的就是自己在里面拼click事件以及对应的按钮样式了 //return '<a href="javascript:void(0);" onclick="del("'+row.id+'")">' + 删除 // + '</a><a href="javascript:void(0);" onclick="mod("'+row.id+'","'+row.name+'")">' + 编辑 + '</a>'; return '<label>' + row.id + '</label> <label>' + row.name + '</label>'; } }] }); </script> </body> </html>

最后感谢雨吴的贡献

网址：option columns.render 渲染列(4) 时间格式化、内容太多优化显示、一列显示多列值《不定时一讲》 DataTables中文网 https://m.mxgxt.com/news/view/1709210

⬅️上一篇：#王鸥何九华酒店门口...

➡️下一篇：Rename (method,

option columns.render 渲染列(4) 时间格式化、内容太多优化显示、一列显示多列值《不定时一讲》 DataTables中文网

第一个问题：时间格式化这个问题主要是代表一类需要自己写额外的js的问题：

第二个问题：内容太多用省略号代替、内容不换行，鼠标移上去显示详情这个问题主要是代表一些需要用css解决的问题：

第三个问题：同时显示多个列的内容这个问题其实昨天已经讲过了，自己通过一些简单的逻辑判断然后返回自己需要的结果就好

最后给大家讲解下columns.render和columnDefs.render的区别：

最后感谢雨吴的贡献

相关内容

随便看看

最新实时动态

热点实时动态

专题

推荐实时动态

option columns.render 渲染列(4) 时间格式化、内容太多优化显示、一列显示多列值 《不定时一讲》 DataTables中文网

第一个问题：时间格式化这个问题主要是代表一类需要自己写额外的js的问题：

第二个问题：内容太多用省略号代替、内容不换行，鼠标移上去显示详情 这个问题主要是代表一些需要用css解决的问题：

第三个问题：同时显示多个列的内容 这个问题其实昨天已经讲过了，自己通过一些简单的逻辑判断然后返回自己需要的结果就好

最后给大家讲解下columns.render和columnDefs.render的区别：

最后感谢 雨吴 的贡献

相关内容

随便看看

最新实时动态

热点实时动态

专题

推荐实时动态

option columns.render 渲染列(4) 时间格式化、内容太多优化显示、一列显示多列值《不定时一讲》 DataTables中文网

第二个问题：内容太多用省略号代替、内容不换行，鼠标移上去显示详情这个问题主要是代表一些需要用css解决的问题：

第三个问题：同时显示多个列的内容这个问题其实昨天已经讲过了，自己通过一些简单的逻辑判断然后返回自己需要的结果就好

最后感谢雨吴的贡献