使用Dynatable插件更新表

本文介绍了使用Dynatable插件更新表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我尝试dynatable和我遇到一个问题。我不知道如何更新来自不同json文件的记录。 我的html正文： < input type =buttonvalue =items aid =setToItemsA>< br> < input type =buttonvalue =items bid =setToItemsB>< br> < br>< br> < table id =my-final-table> < thead> < th> Band< / th> < th> Song< / th> < / thead> < tbody> < / tbody> < / table> 我的脚本 var json1 = [ {band：Weezer，song： El Scorcho， {band：Chevelle，song：Family System} ]; var json2 = [ {band：Band1，song：Song1}， { band：Band2，song：Song2} ]; $（'＃my-final- dynatable（{ dataset：{ records：json1 } }）; $（'＃setToItemsA'）。click （ function（）{ setToItems（json1）; }）; $（'＃setToItemsB'）。click（ function（）{ setToItems（json2）; }）; 函数setToItems（参数）{ console.log（argument）; $（'＃my-final-table'）。dynatable（{ dataset：{ records：argument } }）; } }）; 我试图取消绑定表并使用新数据集重做但不起作用。我真的不知道。感谢您的帮助！解决方案请参阅此Github问题。简短版本是你想要更新你的 setToItems 函数，以便它 替换dynatable实例的原始记录集。 调用dynatable实例的 process（）函数。 为此，首先在dynatable实例化时首先缓存dynatable实例对象（以便我们不必每次都加载它） setToItems 函数被调用： var dynatable = $（'＃my dynatable（{ dataset：{ records：json1 } }）。data（'dynatable'）; 现在，让我们更新我们的功能： function setToItems（argument）{ console.log（argument）; dynatable.settings.dataset.originalRecords = argument; dynatable.process（）; } 在上面，我们可以设置 originalRecords 到我们想要的任何JSON集合。但是在调用 process（）之前，dynatable不会更新DOM中的表。这允许我们在需要时一次完成多个交互，例如添加一些过滤器，更改页面，添加排序等，而不会触发每个单独更改的DOM更新，除非我们告诉它。 Im trying dynatable and Im running into an issue. I not sure how to update records from different json files.My html body:<input type="button" value="items a" id="setToItemsA"><br><input type="button" value="items b" id="setToItemsB"><br><br><br><table id="my-final-table"> <thead> <th>Band</th> <th>Song</th> </thead> <tbody> </tbody></table>my script$(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 } }); }});I tried to unbind the table and redo it with the new dataset but did not work. I honestly dont know. Thanks for your help! 解决方案 See the relevant discussion in this Github issue. The short version is that you want to update your setToItems function so that it Replaces the original record-set for the dynatable instance.Calls the process() function of the dynatable instance.To do this, let's first cache the dynatable instance object when we first instantiate dynatable (so that we don't have to keep loading it every time the setToItems function is called:var dynatable = $('#my-final-table').dynatable({ dataset: { records: json1 }}).data('dynatable');Now, let's update our function:function setToItems (argument) { console.log(argument); dynatable.settings.dataset.originalRecords = argument; dynatable.process();}In the above, we can set the originalRecords to whatever JSON collection we want. But dynatable won't update the table in the DOM until we call process(). This allows us to do multiple interactions at once if we want, such as adding some filters, changing the page, adding sorts, etc. all at once without triggering a DOM update for each individual change unless we tell it to. 这篇关于使用Dynatable插件更新表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！