javascript - 如何使用 aoColumns 添加或注入(inject)列到 jQuery 数据表？

Question

我目前正在尝试将数据列动态添加到 jQUery 数据表中。

本质上，当用户单击 UI 组件(数据可视化/图表)时，它应该将新的数据列注入(inject)数据表中。

我试图通过将列信息推送到 datatable.fnSettings().aoColumns 然后重新渲染数据表来实现此目的。

但是我收到错误。

这是我的代码:

This is part of an extensive feature on a dashboard in which the tables are integrated with C3.js + DC.js + Crossfilter.JS

这是我的表格 HTML:

<table id="dc-data-table" class="list table table-striped table-bordered">
  <thead>
    <tr>
       <th>Name</th>
       <th>Date</th>
       <th>Age</th>
       <th>Gender</th>
    </tr>
  </thead>
</table>

下面是根据 DC 和 Crossfilter 方面呈现表格的 Javascript。

如果用户使用带 Crossfilter 的 DC 图表过滤数据集，RefreshTable() 将重新绘制表格...本质上是数据集发生变化，然后

datatable.fnClearTable(); datatable.fnAddData(newdataset); datatable.fnDraw();

用于更新数据表。

var ndx = crossfilter(data);
var all = ndx.groupAll();

var tabledim = ndx.dimension(function(d){return d.name});

dc.dataCount(".dc-data-count")
  .dimension(ndx)
  .group(all);

  var datatable = $("#dc-data-table").dataTable({
      "bSort": true,
      "bInfo": false,
      "bAutoWidth": false,
      "bInfo": true,
      "bDeferRender": true,
      "aaData": tabledim.top(Infinity),
      "bDestroy": true,
      "aoColumns": [
            { "mData": "name",
              "mRender": function(client) {
                 var res = '<a href="/URL/To/Person/' + client + '/" target="_blank">' + client + '</a>';
            return res;}},
            { "mData": "date_call_rcvd",
              "mRender": function(d) {return dtFormat2(parseDate(d));}},
            { "mData": "age",
              "sDefaultContent": ""},
            { "mData": "gender",
              "sDefaultContent": ""}
          ],
          "aaSorting": [[0, "asc"]],
          "iDisplayLength": 25
  });

  function RefreshTable() {
      dc.events.trigger(function () {
          alldata = tabledim.top(Infinity);
          datatable.fnClearTable();
          datatable.fnAddData(alldata);
          datatable.fnDraw();
          dc.redrawAll();
          d3.selectAll(".pie-slice").call(d3Tip);
          d3.selectAll(".pie-slice").on("mouseover", d3Tip.show)
          .on("mouseout", d3Tip.hide);
          });
  };

  for (var i = 0; i < dc.chartRegistry.list().length; i++) {
      var chartI = dc.chartRegistry.list()[i];
      chartI.on("filtered", RefreshTable);
  };

现在，每当用户与一组 C3.js 图表交互时，我都需要注入(inject)新的数据列。此数据已包含在我正在使用的数据集中，但根据用户单击的内容，应从数据集中返回特定的数据字段或“关键字”，然后将其添加到表中。

这些是图表本身 onclick() 方法中的声明，将在用户单击图表后运行。

//First Declare keyword to represent the field that is being added
var keyword = ThisChart.keyword.toString()

//Append Column Name to Table's HTML 
$('#dc-data-table thead tr').append('<th id="keyword_col">'+ keyword +'</th>');

//Access aoColumns from fnSettings and push Column Data object in.
datatable.fnSettings().aoColumns.push({
   "mData": keyword,
   "sDefaultContent": ""
});

//RefreshTable() to update the DataTable
RefreshTable()

但是这会引发错误

未捕获类型错误:oCol.fnGetData 不是函数

你知道我做错了什么吗？或者也许是使用我当前的设置动态地将列注入(inject)数据表的更好方法？

任何建议都会有帮助，我们将不胜感激。

谢谢。

Answer 1

我能够解决这个问题。

本质上，简单地将新字段从 datatable.fnSettings() 推送到 aoColumns 中并不会更新该特定对象中包含的大量元素。您需要再次运行 datatable = $("#dc-data-table").dataTable() 来设置这些所需的方法/属性。

我将基本的数据表设置存储在一个对象中，并将其声明为全局变量。然后我可以通过任何方法更改该变量并一遍又一遍地重写数据表。

这是我的技巧:

//Define Initial Table

var oTable = {
      "bSort": true,
      "bInfo": false,
      "bAutoWidth": false,
      "bInfo": true,
      "bDeferRender": true,
      "aaData": tabledim.top(Infinity),
      "bDestroy": true,
      "aoColumns": [
            { "mData": "name",
              "mRender": function(client) {
                 var res = '<a href="/URL/To/Person/' + client + '/" target="_blank">' + client + '</a>';
            return res;}},
            { "mData": "date_call_rcvd",
              "mRender": function(d) {return dtFormat2(parseDate(d));}},
            { "mData": "age",
              "sDefaultContent": ""},
            { "mData": "gender",
              "sDefaultContent": ""}
          ],
          "aaSorting": [[0, "asc"]],
          "iDisplayLength": 25
  };

var datatable = $("#dc-data-table").dataTable(oTable);

//Inject Keyword as new Column then Update

chart.onClick(function(d){
  clearAll();
  $('#dc-data-table thead tr').append('<th id="keyword_col">'+ keyword +'</th>');
  oTable.aoColumns.push({
     "mData": keyword,
     "sDefaultContent": ""
  });
  datatable = $("#dc-data-table").dataTable(oTable);
  RefreshTable();
})

// Clear Function to Remove Column

function clearAll(){
 if(oTable.aoColumns.length > 4){
     oTable.aoColumns.pop();
     datatable = $("#dc-data-table").dataTable(oTable);
 }
 RefreshTable();
 dc.filterAll();
 dc.renderAll();
}; 

我担心这可能不是最有效的解决方案，也许不是最快的方法，因为我现在声明两个全局变量并在用户点击时不断渲染数据表。欢迎提出更好的方法，我们将不胜感激。