JQuery DataTable：カラムタイトルのカラムスパンを動的に設定する

Question

ドキュメントによって提供されるexampleとは異なり、カラムタイトルスパンを動的に作成したい。

Iサンプルdata

var data = []; 

for (var i = 0; i < 4; ++i) { 
    for (var j = 0; j < 4; ++j) { 
     var dataRow = []; 
     dataRow.push ("10" + (i + 1)); 
     dataRow.push ("A"); 
     for (var k = 0; k < 8; ++k) { 
      dataRow.push ("B"); 
      dataRow.push ("test"); 
     } 
     data.push (dataRow); 
    } 
} 

がcolumnDefs

var columnDefs = [ 
    { 
     title: "title", 
     targets: [0, 1] 
    } 
]; 

for (i = 0; i < 8; ++i) { 
    columnDefs.push ({ 
     title: "data" + i, 
     targets: [(i + 1) * 2, (i + 1) * 2 + 1] 
    }); 
} 

と生成されたテーブル

$("#table").DataTable({ 
    columnDefs: columnDefs, 
    data: data, 
    rowsGroup: [ 
     0 
    ], 
    responsive: true, 
    paging: false, 
    searching: false, 
    fixedHeader: true, 
    fixedColumns: { 
     leftColumns: 2 
    }, 
    scrollX: true, 
    scrollY: "200px", 
    scrolLCollapse: true, 
    info: false, 
    ordering: false 
}); 

しかしテーブルtargetsフィールドによって割り当てられた各列のタイトルを複製を介してヘッダを生成しようと生成しました。効果的にthを作成する方法はありますか？colspanは2ですか？データテーブルcolspan作業を行うこと

Demo

Answer 1

は、第二のヘッダ行、列ごとに1つのヘッダーセルを有するものが必要となります。 https://datatables.net/examples/advanced_init/complex_header.htmlから

引用：のDataTableの列を検出するために、そのセルを使用して順序を適用するためにそれを使用できるように、各列は、少なくとも一つのユニークなセル（COLSPAN無しすなわちセル）を有していなければならないこと

注意。

しかし、動的colspanにヘッダを追加する方法についてのご質問にお答えするために、次の操作を実行できます。

var headers = '<thead><tr><th colspan="2">Title</th><th colspan="2">1</th><th colspan="2">2</th><th colspan="2">3</th><th colspan="2">4</th><th colspan="2">5</th><th colspan="2">6</th><th colspan="2">7</th><th colspan="2">8</th></tr>'; 
headers += '<tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead>'; 

$("#table").append(headers); 

$("#table").DataTable({...}); 

デモ更新

：それをあなたがかもしれ正しい外観を与えるためにhttps://jsfiddle.net/pn4aLmpb/1/

をこの2番目の行に0の高さを適用することができます。ヘッダが行データと整列しなくなるため、display:noneは機能しません。これは、舞台裏でDataTableが凍った行、列、見出しの効果をシミュレートするためにいくつかの重複するHTMLテーブルを巧みに生成するため、列データと列見出しの間に明確な切り離しが存在するためです。