使用Dynatable插件更新表

我正在尝试dynatable和我遇到一个问题。 我不知道如何更新来自不同json文件的记录。

我的HTML身体:





Band Song

我的剧本

 $(document).ready(function() { var json1 = [ { "band": "Weezer", "song": "El Scorcho" }, { "band": "Chevelle", "song": "Family System" } ]; var json2 = [ { "band": "Band1", "song": "Song1" }, { "band": "Band2", "song": "Song2" } ]; $('#my-final-table').dynatable({ dataset: { records: json1 } }); $('#setToItemsA').click( function() { setToItems(json1); }); $('#setToItemsB').click( function() { setToItems(json2); }); function setToItems (argument) { console.log(argument); $('#my-final-table').dynatable({ dataset: { records: argument } }); } }); 

我尝试取消绑定表并使用新数据集重做它但不起作用。 老实说,我不知道。 谢谢你的帮助!

请参阅此Github问题中的相关讨论。 简短版本是您要更新setToItems函数以便它

  1. 替换可动态实例的原始记录集。
  2. 调用dynatable实例的process()函数。

为此,让我们在第一次实例化dynatable时首先缓存可动态实例对象(这样我们就不必每次调用setToItems函数时都继续加载它:

 var dynatable = $('#my-final-table').dynatable({ dataset: { records: json1 } }).data('dynatable'); 

现在,让我们更新我们的function:

 function setToItems (argument) { console.log(argument); dynatable.settings.dataset.originalRecords = argument; dynatable.process(); } 

在上面,我们可以将originalRecords设置为我们想要的任何JSON集合。 但是在我们调用process()之前,dynatable不会更新DOM中的表。 如果我们需要,这允许我们一次进行多个交互,例如添加一些filter,更改页面,添加排序等等,而不会触发每个更改的DOM更新,除非我们告诉它。

    Interesting Posts