bootstrap table load 和updateByUniqueId方法

关于bootstrap table上次简单提到了一下，但几个方法的本质区别并没有懂。刚开始并没有打算去看源码，但接下来又用到了这些方法，感觉一脸懵，所以决定看源码搞懂他们之间的本质区别。

refreshOptions：

 this.destroy();
 this.init();

这个一看就明了，
先调用destroy()函数remove整个table，然后调用init()重新渲染table以及搜索、翻页等功能。

load

加载数据到表格中，旧数据会被替换。

this.initData(data);
this.initSearch();
this.initPagination();
this.initBody(fixedScroll);

initData：处理数据，利用extend更新this.options.data
initSearch：搜索功能
initPagination：分页功能
initBody：渲染页面，
利用document.createDocumentFragment()创造一个空文档对象，

DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。
因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流。因此，使用文档片段document fragments 通常会起到优化性能的作用)。所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作

在当前页面（不一定是第一页）创造tr元素，append到document fragments，最后将document fragments append到body中

updateByUniqueId

table中所有的数据会存在this.options.data，通过遍历找到需要更新的元素，

接下来和load一样，创造DocumentFragments对象，进行同样的操作。

其他方法原理类似

总结

不管是load ，还是updateByUniqueId,其实他们都是将数据保存，然后利用DocumentFragments更新当前页面，就是说其他页面保存的数据更新了，但是并不会在浏览器上渲染。

在查看源码的过程中，发现在L执行load方法的最后一步之前会调用这两个函数

this.initSearch();
this.initPagination();

在更新表格数据之前，会先看是否有启动搜索功能和翻页，然后才更新。
之前自己做搜索功能时（嗯，不要问为啥要自己做搜索功能），并没有采用这样的方法，而是检测有pressdown事件时就搜索，这样就会导致当页面显示搜索出来的结果时，一会后正好有数据更新，那么搜索的结果就会被覆盖。