如何更改數據源

Question

列

我有這樣的定義的數據列的表：

var table = myEl.DataTable({ 
    paging: false, 
    searching: true, 
    info: false, 
    ordering: true, 
    autoWidth: false, 
    columns: [ 
     {data: 'Name', name: 'Name'}, 
     {data: 'Time', name: 'Time'} 
    ] 

}); 

的飼料這個表是這樣的數據：

{ 
    Name: "Bob", 
    Time: "Wed Aug 26 2015 16:09:52 GMT-0500 (Central Daylight Time)", 
    TimeTwo: "16:09:52" 
} 

所以數據表存儲了整個對象並顯示名稱和時間。

如何將初始化中「列」中定義的數據源切換爲使用TimeTwo而不是Time？ （在表獲得數據後）

簡單地說：表加載名稱和時間，但是如何在初始化後將其切換爲使用TimeTwo？動態切換它？

function switchDataSourceForTime(){ 
    // what to do...? 
} 

Answer 1

您可以使兩列都呈現，但只顯示一個列。事情是這樣的：

<div> 
    Toggle column: 
    <input id="btn" type="button" value="change column value"></input> 
</div> 
<br> 
<div> 
    <table id="table"></table> 
</div> 

---

var data = 
    [ 
    { 
     Name: "Bob", 
     Time: "Wed Aug 26 2015 16:09:52 GMT-0500 (Central Daylight Time)", 
     TimeTwo: "16:09:52" 
    }, 
     { 
     Name: "Tom", 
     Time: "Wed Aug 25 2015 17:41:23 GMT-0500 (Central Daylight Time)", 
     TimeTwo: "17:41:23" 
    } 
]; 

var table = $("#table").DataTable({ 
    data: data, 
    paging: false, 
    searching: true, 
    info: false, 
    ordering: true, 
    autoWidth: false, 
    columns: [ 
     {data: 'Name', name: 'Name'}, 
     {data: 'Time', name: 'Time'}, 
     {data: 'TimeTwo', name: 'TimeTwo'} 
    ] 

}); 

table.column("2").visible(false); 

$('#btn').on('click', function(e){ 
    e.preventDefault(); 

    var columnTimeTwo = table.column("2").visible(!table.column("2").visible()); 
    var columnTime = table.column("1").visible(!table.column("1").visible()); 

}); 

你可以看到fiddle