使用 Dynatable 插件更新表

2022-01-11 00:00:00 jquery jquery-plugins html dynatable

我正在尝试 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.

相关文章