javascript - JSON 呼び出し後に Dynatables を取得して広告ヘッダーを変更する

Question

私は ajax に支えられた dynatable を持っています。現時点では、事前に既知のヘッダーを持つテーブルで完全に機能します。

例：

var tableHeaders = '';

// Generate table headers from some list
$scope.Model.computed.selection_list.map(
    function(selection){
    column_name = selection.table + "." + selection.column;
    tableHeaders += "<th>" + column_name + "</th>";
});

//wipe div hosting the dynatable and reinitialise a table
var table_div = $('#TableDiv');
table_div.empty();
table_div.append('<table id="previewTable" class="table table-condensed table-responsive table-striped table-hover"><thead><tr>' + tableHeaders + '</tr></thead></table>');
var preview_table = $('#previewTable');
console.log("Table wiped");

//initialise the dynatable
preview_table.dynatable({
    features: {
        perPageSelect: true,
        search: false
    },
    table: {
        defaultColumnIdStyle: 'underscore',
        headRowSelector:'thead tr',
        headRowClass: ''
    },
    dataset: {
        ajax: true,
        ajaxUrl: data_url,
        ajaxOnLoad: false,
        ajaxMethod: 'POST',
        records: []
    }
    });

ただし、レコードをフェッチした後、行に入力する前にテーブル ヘッダーを生成したいと考えています。

これは可能ですか？

// Changing via an ajax success event hook doesn't work. 
// The table headers change but the records don't bind to the correct column leaving every row as null
preview_table.bind('dynatable:ajax:success', function(e, response){
 console.log("Ajax response: " + response) ;
    tableHeaders = '';
    first_record = response.records[0];
    Object.keys(first_record).map(function(column_name){
        tableHeaders += "<th>" + column_name + "</th>";
        }
    )
    preview_table.html('<thead><tr>' + tableHeaders + '</tr></thead>')
    console.log("headers: " + tableHeaders);
})