javascript - 使用新 API 重新初始化数据表

Question

我发现了一些关于使用旧 API 重新初始化数据表的 SO 线程，但我认为它们现在已被弃用。

我有一个现有的渲染数据表。我想用新设置刷新它。使用新的 API，我将如何执行以下操作:

var dataTable = $('table.dataTable').DataTable();

var newDataTableSettings = {
    data: { /* some data */ },
    columns: { /* some columns*/ },
    bFilter: false,
    // etc...
};

// something like dataTable.clear().data(newDataTableSettings).draw()

我最接近的尝试:

dataTable.clear().draw() 
dataTable.rows.add({ /* some data */ }).draw();

Answer 1

使用 destroy选项:

$('#example').DataTable({
    data:  [{ test : 'test' }, { test : 'qwerty'}],    
    columns : [ { data : 'test', title: 'test' } ]    
});

使用新数据重新初始化并删除搜索功能。

$("#reinit").on('click', function() {
    $('#example').DataTable({
        destroy: true, //<--- here
        data: [{ newCol : '100010'}, { newCol : '234234'}],
        columns: [ { data : 'newCol', title: 'header' } ],
        searching: false
    })
});

http://jsfiddle.net/3sonfsfm/

如果您使用选项文字，您必须在重新使用它之前重置它:

var options = {
    data:  [{ test : 'test' }, { test : 'qwerty'}],    
    columns : [ { data : 'test', title: 'test' } ]    
}

$("#reinit").on('click', function() {
    options = {}; //<--- RESET
    options.destroy = true;
    options.data = [{ newCol : '100010'}, { newCol : '234234'}];
    options.columns = [ { data : 'newCol', title: 'header' } ];
    options.searching = false;
    $('#example').DataTable(options).draw();
});

这是因为options对象丰富了aaData,aoColumns等不同的值，如果指定会冲突新的数据 和新的列。