JQuery DataTable: динамическое определение столбца столбца

Question

В отличие от example, предоставленного документацией, я хочу динамически изменять заголовок столбца.

Я вызвал образец 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 s есть colspan из 2)?

Demo

Answer 1

Чтобы сделать DataTable colspan работы требует второй строки заголовка, тот, который имеет одну ячейку заголовка для каждого столбца.

Цитата https://datatables.net/examples/advanced_init/complex_header.html:

Обратите внимание, что каждый столбец должен иметь по крайней мере одну уникальную ячейку (т.е. клеток без Colspan) так DataTables может использовать эту ячейку для определения столбца и использовать его, чтобы применить порядок.

Но чтобы ответить на ваш вопрос о том, как добавить заголовки с 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/

Чтобы дать ему правильный внешний вид может быть способный применить высоту 0 к этой второй строке. Обратите внимание, что display:none не будет работать, поскольку заголовки больше не будут совпадать с данными строки. Это связано с тем, что за кулисами DataTable умело генерирует несколько перекрывающихся HTML-таблиц для имитации эффектов замороженных строк, столбцов и заголовков, так что существует отличное отключение между данными столбца и заголовками столбцов.