問題描述

我正在嘗試 dynatable，但遇到了問題.我不知道如何更新來自不同 json 文件的記錄.

Im trying dynatable and Im running into an issue. I not sure how to update records from different json files.

我的 html 正文:

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>

我的腳本

$(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!

推薦答案

參見中的相關討論這個 Github 問題.簡短的版本是您要更新 setToItems 函數，以便它

See the relevant discussion in this Github issue. The short version is that you want to update your setToItems function so that it

1. 替換可動態實例的原始記錄集.
2. 調用可動態實例的process()函數.

為此，我們先在第一次實例化dynatable時緩存dynatable實例對象(這樣我們就不必在每次調用setToItems函數時一直加載它:

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();
}

在上面，我們可以將 originalRecords 設置為我們想要的任何 JSON 集合.但是在我們調用 process() 之前，dynatable 不會更新 DOM 中的表.如果我們愿意，這允許我們一次進行多個交互，例如添加一些過濾器、更改頁面、添加排序等，而不會為每個單獨的更改觸發 DOM 更新，除非我們告訴它這樣做.

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 插件更新表的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！