javascript - JQuery DataTable: Set colspan of column title dynamically -

unlike in example provided documentation, want make column title span dynamically.

i have generated sample data

var data = [];  (var = 0; < 4; ++i) {     (var j = 0; j < 4; ++j) {         var datarow = [];         datarow.push ("10" + (i + 1));         datarow.push ("a");         (var k = 0; k < 8; ++k) {             datarow.push ("b");             datarow.push ("test");         }         data.push (datarow);     } } 

tried generate header via columndefs

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

and generated table

$("#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 }); 

but table duplicated title on each column assigned targets field. there way can merge them (effectively making ths have colspan of 2)?

demo

to make datatable colspan work requires second header row, 1 has single header cell each column.

quote https://datatables.net/examples/advanced_init/complex_header.html:

note each column must have @ least 1 unique cell (i.e. cell without colspan) datatables can use cell detect column , use apply ordering.

but answer question on how add headers colspan dynamically, can following:

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({...}); 

updated demo: https://jsfiddle.net/pn4almpb/1/

to give correct appearance may able apply height of 0 second row. note display:none won't work headers no longer align row data. because behind scenes datatable cleverly generates several overlapping html tables simulate effects of frozen rows, columns , headings, there distinct disconnect between column data , column headings.