таблицы данных jquery: как изменить сопоставления столбцов (из-за вставленного "столбца заголовка строки")?

#javascript #html #ajax #datatables

#javascript #HTML #ajax #таблицы данных

Вопрос:

Я добавил «столбец заголовка строки» в свою таблицу (визуализируется 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) в одной строке? Просто сказать: «пожалуйста, сдвиньте столбцы» или «пожалуйста, удалите сопоставления формы первой строки-заголовка-столбца».

Ответ №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 , но это немного более подробно.

1. Если невозможно настроить стандартную конфигурацию, я планирую рассмотреть, как добавлять столбцы в массив с помощью динамического javascript (отправка или жесткое кодирование метаданных). Для этого случая использовать columns.data or columnDefs.data — отличное решение…

Ответ №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]... } }