Datatables js 複雜表頭 合併儲存格

標籤：解決   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 複雜表頭 合併儲存格