DataTables с различным количеством столбцов

я столкнулся с той же проблемой, когда мои обновленные данные были разное количество столбцов чем предыдущие данные. Рецепт действительно просто! в сценарии, когда есть изменение количества столбцов, Destroy function работает в сочетании с $("#datatable").empty();. Поэтому перед перезагрузкой данных ваш код будет содержать следующие строки:

if (dataTableObject) { // Check if DataTable has been previously created and therefore needs to be flushed

    dataTableObject.fnDestroy(); // destroy the dataTableObject
    // For new version use table.destroy();
    $('#' + DataTableDivID).empty(); // Empty the DOM element which contained DataTable
    // The line above is needed if number of columns change in the Data
    }
// DataTable data loading/reloading codes comes here

в целом, ваш код может выглядеть так:

if(dataTableObject) { // Check if table object exists and needs to be flushed
    dataTableObject.fnDestroy(); // For new version use table.destroy();
    $('#myTable').empty(); // empty in case the columns change
}

var data = (province=='sp') ? sp : np;
var columns = (province=='sp') ? spColumns : npColumns;

dataTableObject = $('#myTable').DataTable({
        columns: columns,
        data:    data
    });

там есть хорошее решение, но после того, как столкнулся с этим вопросом, динамизм все еще звонит в колокол на моем уме. я хотел бы поделиться этим , а не экспортировать в JS. Поэтому, пожалуйста, прокомментируйте.

function genericAjaxCall(url, tableId, _header, _dataMapping, isData,
    isEditDelete) {
if (!isData) {
    $.ajax({
        url : url,
        method : "GET",
        dataType : "JSON",
        success : function(data) {
            var editDeletUrl = url.split("/");
            var dataArray = createArray(_header, data, _dataMapping, url,
                    isEditDelete)
            createListHeading(tableId, dataArray, false);
            initDT(tableId, dataArray);
        },
        error : function(xhr) {
            console.log(xhr);
            openErrorModal("Guru", xhr.responseText);
        }
    });
} else {
    var dataArray = createArray(_header, url, _dataMapping);
    console.log(dataArray);
    var finalData = dataArray + objName;
    console.log(finalData);
    createListHeading(tableId, dataArray, false);
    initDT(tableId, dataArray);
 }
}

function createArrayWithDelete(_header, data, _dataMapping, url) {
var posts = {};
posts.postDT = []
for (var i = 0; i < data.length; i++) {
    var jsonData = {};

    for (var j = 0; j < _header.length; j++) {
        if (_dataMapping[j].indexOf('.') !== -1) {
            var parts = _dataMapping[j].split(".");
            if (String(data[i][parts[0]][parts[1]]).indexOf('*') !== -1) {
                jsonData[_header[j]] = data[i][parts[0]][parts[1]].bold()
                        .replace("*", "");
            } else {
                jsonData[_header[j]] = data[i][parts[0]][parts[1]];
            }

        } else {

            if (String(data[i][_dataMapping[j]]).indexOf('*') !== -1) {
                jsonData[_header[j]] = data[i][_dataMapping[j]].bold()
                        .replace("*", "");
            } else {
                jsonData[_header[j]] = data[i][_dataMapping[j]];
            }
        }
    }

    if (_header[_header.length - 1]) {
        jsonData["Action"] = deleteOnly(url,
                data[i][_dataMapping[_dataMapping.length - 1]]);
    }

    posts.postDT.push(jsonData);
   }
   return posts.postDT;
  }

function createListHeading(tableId, data, isAction) {
var posts = {
    post : []
};
$.each(data[0], function(key, value) {
    posts.post.push({
        "mDataProp" : key,
        "sTitle" : key
        /* "sType" : "string" */
    });
   });
  cols = posts.post

 }

function initDT(tableId, results) {
// Construct the measurement table
data_table = $('#' + tableId).DataTable({
    "iDisplayLength" : 10,
    scrollCollapse : true,
    "aaSorting" : [],
    "aaData" : results,
    "aoColumns" : cols
});
$('#' + tableId).DataTable().columns.adjust();
}

и вот как я называю,

$(function() {
    var header = [ "H1", "H2", "H3", "H4" ];
    var dataMapping = [ "d1", "d2", "d3", "d3" ];

    genericAjaxCall("ajaxurlWhichreturnJSON", "tableId", header, dataMapping,
            false, true);
});

здесь d1, d2... являются ключом вашего ответа ajax. Теперь нам не нужно беспокоиться о том, какое значение выбирает пользователь. Примечание : это не прямое решение этого вопроса, но это образное