javascript - 获取 Dynatables 以在 JSON 调用后修改 thead header

Question

我有一个支持 ajax 的动态表。目前，它非常适用于先前具有已知标题的表。

示例:

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);
})

Answer 1

我遇到了完全相同的问题，经过数小时的努力，我想出了这个解决方案:

首先，您的初始 TABLE 应该如下所示:

<table id="my-table">
  <thead>
    <tr><th></th></tr>
  </thead>
  <tbody>
  </tbody>
</table>

我们需要空的 TH 来防止插件抛出错误(Couldn't find any columns headers in...)，稍后将删除它。

然后我们使用 dynatable:ajax:success 来编辑列如下:

$("#my-table").one('dynatable:ajax:success', function(e, response){ 
    //Get dynatable 
    var dynatable = $(this).data('dynatable');
    //Remove the empty column
    dynatable.domColumns.remove(0);
    //Add new columns
    var pos = 0;
    for(var column in response.records[0]) {
        dynatable.domColumns.add($('<th>'+column+'</th>'), pos++);
    }
});

最后，您可以启动插件:

$("#my-table").dynatable({
  features: {
    perPageSelect: true,
    search: false
  },
  table: {
    defaultColumnIdStyle: 'underscore',
    headRowClass: ''
  },
  dataset: {
    ajax: true,
    ajaxUrl: data_url,
    ajaxOnLoad: false,
    records: []
  }
});

检查以下演示，请注意该代码段未完全正常运行(SecurityError)。这是一个完全可用的 jsfiddle :

var data_url = "https://gist.githubusercontent.com/iRbouh/47a9fb7e5f6a79e0f4b0e7e8a837a825/raw/6adbba47bfbf9453c50f9710f77c71e69f683139/sample-data.json";

var preview_table = $('#my-table');

preview_table.one('dynatable:ajax:success', function(e, response){ 
  //Get dynatable 
  var dynatable = $(this).data('dynatable');
  //Remove init column
  dynatable.domColumns.remove(0);
  //Add new columns
  var pos = 0;
  for(var column in response.records[0]) {
    dynatable.domColumns.add($('<th>'+column+'</th>'), pos++);
  }
});

preview_table.dynatable({
  features: {
    perPageSelect: true,
    search: false
  },
  table: {
    defaultColumnIdStyle: 'underscore',
    headRowClass: ''
  },
  dataset: {
    ajax: true,
    ajaxUrl: data_url,
    ajaxOnLoad: false,
    records: []
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/alfajango/jquery-dynatable/master/jquery.dynatable.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/alfajango/jquery-dynatable/master/jquery.dynatable.js"></script>
<table id="my-table">
  <thead>
    <tr><th></th></tr>
  </thead>
  <tbody>
  </tbody>
</table>