如何更改列的数据源

Question

我有一个 table 数据列定义如下：

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

});

提供此 table 的数据如下所示：

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

因此 DataTables 存储整个对象并显示名称和时间。

如何在初始化时将 "columns" 中定义的数据源切换为使用 TimeTwo 而不是 Time？（在 table 得到数据后）

很简单：table 加载了 Name 和 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

上查看代码运行

如何更改列的数据源

How to change data source for column

javascript

jquery

datatables