重新初始化数据表中使用新的API(Reinitialize datatable using the

2019-10-23 09:36发布

我发现关于使用旧的API重新初始化一个DataTable一些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富含不同的值,如对象aaDataaoColumns的等等,如果指定了新的,将冲突data和新columns



文章来源: Reinitialize datatable using the new API