jquery datatables: как сместить сопоставления столбцов (из-за вставленного «столбца заголовка строки»)?

Question

Я добавил «столбец заголовка строки» в мою таблицу (отображается с помощью плагина datatables jquery):

HTML:

<table id="main-table" class="table table-hover table-striped mainTable w-100">
    <thead>
        <tr>
            <th class="addNewHeader no-sort not-colvis">
                <a class="btn-sm" href="..." ><span class="material-icons">note_add</span></a>
            </th>
            <th>ID</th>
            <th>Part</th>
            <th>Released</th>
            <!-- other columns -->
        </tr>
    </thead>
    <tbody></tbody>
</table>

Доступ к данным осуществляется с помощью ajax (отправка в виде массива, а не в виде ассоциативного массива).

Проблема в том, что теперь я должен переставить сопоставления для каждого столбца:

table = $('#main-table').DataTable({
    ajax: {"url": "..."},
    columnDefs: [
    {
          targets: 1,
          render: function (data, type, row, meta) {
             return row[0]; // table column 1, data column 0
          }
     },
     {
            targets: 2,
            render: function (data, type, row, meta) {
               return row[1];  // table column 2, data column 1
            }
      },
      {
            targets: 3,
            render: function (data, type, row, meta) {
               return row[2];  // table column 3, data column 2
            }
      },
      // and so on
    ];
});

Это слишком многословно.

Можно ли настроить одно и то же (сопоставить столбец данных X со столбцом таблицы X + 1) в одной строке? Просто чтобы сказать: «пожалуйста, сдвиньте столбцы» или «пожалуйста, удалите первые отображения формы строки-заголовка-столбца».

Answer 1

Используйте columns и columns.data, чтобы указать индекс массива для источника данных.В этом случае вам потребуется указать параметры для каждого столбца, включая первый.

Например:

table = $('#main-table').DataTable({
    ajax: {"url": "..."},
    columns: [
    {
          data: null
          render: function (data, type, row, meta) {
             // ... skipped ...
          }
     },
     { data: 1 },
     { data: 2 },
     { data: 3 },
     // ... skipped ...
    ];
});

В качестве альтернативы вы можете использовать комбинацию columnDefs.data и columnDefs.targets, но это немного более многословно.

Answer 2

На данный момент динамическая конфигурация «по умолчанию» является наилучшей из найденных опций:

dataColumnCount = 15;
tableColumnCount = dataColumnCount + 1;
 dtOptions.columns = new Array(tableColumnCount );
 // default:
 for (i = 0; i < tableColumnCount; i++) {
     dtOptions.columns[i] = { targets: i, data: i - 1};
 };
 // replace where it is required with custom renderer:
 dtOptions.columns[0] = {
     render: function (data, type, row, meta) { ..} }
 dtOptions.columns[3] = {
     render: function (data, type, row, meta) { .. row[2]... } }