DataTables - динамически устанавливать имена столбцов из запроса ajax с несколькими таблицами на странице

Question

В DataTables возможно ли динамически отображать заголовки столбцов (<thead>> <th> элементов) на основе ответа ajax? Крайне важно, что на странице одновременно есть несколько таблиц, в отличие от других ответов, где всего одна таблица, в которой имена столбцов изменяются в зависимости от данных в ответе ajax.

Ранее я использовал его, когда HTML-код <table> присутствует при загрузке страницы и содержит заголовки столбцов, например,

<table id="table1">
    <thead>
        <tr> 
            <th>Table 1 - Column A</th>
            <th>Table 1 - Column B</th>
            <th>Table 1 - Column C</th>
        </tr>
    </thead>
</table>


<table id="table2">
    <thead>
        <tr> 
            <th>Table 2 - Column A</th>
            <th>Table 2 - Column B</th>
            <th>Table 2 - Column C</th>
        </tr>
    </thead>
</table>

В этом сценарии есть 2 таблицы с идентификаторами #table1 и #table2. Я инициализировал их следующим образом:

$.each($('table'), function () {
    drawTable($(this).attr('id'));
});

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

function drawTable(id) {
        $id = $('#'+id); // Convert string ID to jQuery identifier

        $id.DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            ajax: {
                data: {
                   table_id: id, // So we know which table ID to obtain data for
                   // ...
                },
                url: '/get-data.json', 
            },
            columns: [
              { "data": "columnA", "name": "columnA" },
              { "data": "columnB", "name": "columnB" },
              { "data": "columnC", "name": "columnC" },
            ],
            // ...
        });
    }

. Это работает, потому что в приведенном выше примере в обеих таблицах есть одинаковые столбцы.

Теперь у меня есть сценарий, в котором одна таблица содержит 5 столбцов, а другая - 3. Имена (как в тексте, который будет отображаться в элементах <th>) в обоих случаях совершенно разные.

Какя могу справиться с этим? Я думал, что мне придется сделать запрос к конечной точке ajax, чтобы создать массив - определенный в columns: в js выше. Или жестко закодировать массив в мои js для каждой таблицы, а затем каким-то образом определить, какой массив использовать на основе идентификатора таблицы.

Однако я не уверен, что это правильный подход или как люди обращались с этим раньше?

Версия DataTables - 1.10.18 и jQuery 3.2.1

У меня былвзгляните на DataTables - динамические столбцы из источника данных Ajax? но это похоже на то, что я делаю. Потому что в этом примере они имеют одну таблицу (с идентификатором #example) и затем отображают имена столбцов на основе ответа ajax. В моем приложении несколько таблиц видны одновременно, и все они имеют разные имена столбцов.

Другой способ, который я рассмотрел, это избавиться от кода $.each и просто иметь отдельную функцию для каждой таблицы. Но это выглядит очень против DRY , потому что я бы повторял множество одних и тех же свойств, когда на самом деле нужно просто изменить columns: для каждой таблицы - насколько я вижу?