Datatables js 复杂表头 合并单元格
Posted C#
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Datatables js 复杂表头 合并单元格相关的知识,希望对你有一定的参考价值。
x
x
项目中用到的Table都是用Datatables插件来搞得;
以前都是生成一般性的table;
近期要生成一些复杂表头,合并单元格之类的;
研究了一下.
x
去官网上也查到了[复杂表头(rowspan 和 colspan)(Complex headers (rowspan and colspan))],[复杂表头], 但是只是html代码,蛋疼啊...
后来看到了[创建行回调(Row created callback)]哪里的时候 ,豁然开朗!!! 先上行回调的官网js代码>>>
$(document).ready(function() { $(‘#example‘).dataTable( { "createdRow": function ( row, data, index ) { if ( data[5].replace(/[\$,]/g, ‘‘) * 1 > 4000 ) { $(‘td‘, row).eq(5).css(‘font-weight‘,"bold").css("color","red"); } } } ); } );
最终解决方案(修改下上面的代码即可)
$(document).ready(function() { $(‘#example‘).dataTable( { "createdRow": function ( row, data, index ) { //生成了行之后,开始生成表头>>>
if (index == 1) {
var innerTh = ‘<tr><th rowspan="2">Name</th>‘;
var columnsCount = 3;//具体情况
innerTh +=‘<th colspan="2">Information</th>‘;
innerTh +=‘<th colspan="3">Contact</th>‘;
innerTh += ‘</tr>‘;
//table的id为"id_table"
document.getElementById(‘id_table‘).insertRow(0);
var $tr = $("#id_table tr").eq(0);
$tr.after(innerTh);
}
} } ); } );
x
总结-
其实会用[创建行回调]之后,
复杂表头只是一个demo了,
想搞其他的只要操作table就行了,比如合并单元格,嘎嘎···
抛砖引玉了...
以上是关于Datatables js 复杂表头 合并单元格的主要内容,如果未能解决你的问题,请参考以下文章
vue中 表头th 合并单元格,且表格列数不定的动态渲染方法
DataTables VS EasyUI DataGrid 基础应用 转
HTMLHTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )