10

我正在尝试 dynatable 并且遇到了问题。我不确定如何更新来自不同 json 文件的记录。

我的html正文：

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

我试图取消绑定表并使用新数据集重做，但没有成功。老实说，我不知道。谢谢你的帮助！

4

1 回答 1

16

请参阅此 Github issue中的相关讨论。简短的版本是您想要更新您的setToItems功能，以便它

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

为此，让我们在第一次实例化 dynatable 时先缓存 dynatable 实例对象（这样我们就不必在每次setToItems调用函数时都继续加载它：

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

现在，让我们更新我们的函数：

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

在上面，我们可以将 设置为originalRecords我们想要的任何 JSON 集合。但是 dynatable 不会更新 DOM 中的表，直到我们调用process(). 如果我们愿意，这允许我们一次进行多个交互，例如添加一些过滤器、更改页面、添加排序等，而不会为每个单独的更改触发 DOM 更新，除非我们告诉它这样做。

于 2014-01-04T09:25:21.500 回答