码迷,mamicode.com
首页 > Web开发 > 详细

Datatables js 复杂表头 合并单元格

时间:2017-07-05 23:42:47      阅读:512      评论:0      收藏:0      [点我收藏+]

标签:解决   form   logs   lex   clu   for   ...   column   info   

x

→Datatables官网←

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 复杂表头 合并单元格

标签:解决   form   logs   lex   clu   for   ...   column   info   

原文地址:http://www.cnblogs.com/love-zf/p/7124016.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!