如何使用按钮刷新YUI dataTable？

Question

我正在测试脚本：

http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

我想添加一个按钮用于刷新（重置）数据。 我想要重置所有修改后的数据并重新加载第一条数据。 我添加了这段代码，所以在选择“刷新”后，我没有任何数据：

YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {

var onMenuItemSelect = function () {

        myDataTable.initializeTable();

        myDataTable.render();

        };

        var aSplitButton5Menu = [

            { text: "Refresh", value: 1, onclick: { fn: onMenuItemSelect } }

        ];

        var oSplitButton5 = new YAHOO.widget.Button({ type: "split",  label: "Refresh table", name: "splitbutton", menu: aSplitButton5Menu, container: this });

    });

我需要在onMenuItemSelect中使用什么来刷新mydataTable？

---

我对示例中的“城市”和“评级”进行了一些更改： http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

现在，我希望通过按钮重置MyTable（并重新加载默认数据集）。 当我使用我的代码时，在单击按钮后，我清除了所有内容，但默认数据未重新加载（单击按钮后显示：“未找到记录。”）。

我如何重新加载默认数据？

- fabien

Answer 1

我认为Gourneau的回答是最好的，但它缺少一个不错的细节。为了显示“Loading...”消息，您需要调用showTableMessage函数。

myDataTable.showTableMessage("Loading...");
myDataTable.getDataSource().sendRequest('', { success: myDataTable.onDataReturnInitializeTable, scope: myDataTable });

当请求完成时，onDataReturnInitializeTable函数将自动清除表格消息。

我也在我的博客上发布了这篇文章。

- JohnRudolfLewis

---

谢谢，一个问题，这个代码中的请求参数在哪里放置？是放在单引号内吗？.sendRequest('myparam=test'，{ success ...? - Doug Molineux

Answer 2

我无法使用Gourneau发布的方法（它在很多地方都被提到）工作，所以我想出了这个小技巧：

   function updateTable(){
      sortState = theDataTable.getState().sortedBy
      var sort = sortState ? sortState.key : "id";
      var dir = sortState ? sortState.dir : "yui-dt-desc";
      theDataTable.sortColumn(theDataTable.getColumn(sort),dir);
   };

你需要找到当前的排序方法，然后调用sortColumn来再次进行排序，并刷新数据。这样可以保持分页的顺序。我将其与搜索框和一些过滤器一起使用，以便根据需要更改它们的值并相应更新表格。

- bret

---

谢谢！这是我重新让[Loading...]用户界面显示的唯一方法。谢谢！ - JohnRudolfLewis

我找到了一个更好的方法来显示“加载中...”界面，请看我的答案。 - JohnRudolfLewis

Answer 3

假设您有一个DataTable实例myTable：

myTable.render()会重新绘制表格; myTable.initializeTable()会清除所有状态，包括排序和选择，并重新绘制

-Eric

- Eric Miraglia

---

在2.7中，如果既不更改页面也不排序，我还必须执行myTable.getDataSource().flushCache()。 - Victor Sergienko

Answer 4

我认为如果你的按钮调用这个函数，它就会起作用：

myDataTable.getDataSource().sendRequest('',
{ success: myDataTable.onDataReturnInitializeTable,scope: myDataTable});

- Gourneau

---

唯一的缺点是，当从服务器获取数据时，您不会自动获得“正在加载...”UI。 - JohnRudolfLewis

此外，这仅适用于动态数据 - 服务器端数据需要Satyam提供的重新查询扩展。 - JasonMichael

Answer 5

我不认为我能在这里充分地发布你所需要的解决方案的所有代码，但雅虎的Satyam（至少是YUI的主要贡献者）有一个重新查询方法，他已经为Datatable添加了一个扩展，并发布了示例。我使用过它，它工作得非常好 - 特别是当你需要为表格添加搜索功能时。

这里是一个开始的链接，但我也建议你在“Satyam requery”下搜索更多的示例或与你的Datatable版本更匹配的示例。

http://www.satyam.com.ar/yui/2.6.0/requery.html

- Jason

附言：如果您正在使用服务器端数据，则利用onDataReturnInitializeTable方法的解决方案将有所帮助，但我认为Satyam的解决方案也考虑到了这一点，并且还跟踪了您的分页。

- JasonMichael