如何使用aoColumns將列添加或注入到jQuery Datatable？

Question

我目前正在嘗試動態地將數據列添加到jQuery數據表。

本質上，當用戶點擊一個UI組件（Data Viz/Chart）時，它應該向數據表中注入一個新的數據列。

我想通過將列信息推入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 。

RefreshTable（）如果用戶濾波器使用具有Crossfilter直流圖表數據集...基本上，數據集的變化，然後

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圖表​​交互時注入一個新的數據列。該數據已包含在我正在使用的數據集中，但根據用戶點擊的內容，數據或「關鍵字」的特定字段應從數據集中返回，然後添加到表中。

這些是圖表本身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不是一個函數

你有一個想法，以我在做什麼錯？或者也許更好的方法來動態地使用我當前的設置將列插入到數據表中？

任何意見將是有益的，非常感謝。

謝謝。

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

我擔心這可能不是最有效的解決方案，也許不是要做到這一點，因爲我現在聲明兩個全局變量，並不斷渲染數據表的最快方法在用戶點擊。隨意提出一個更好的方法，這將不勝感激。