如何使用按钮刷新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(并重新加载默认数据集).当我使用我的代码时,按下按钮后,我清除所有并且不重新加载默认数据(我有:"没有找到记录."按钮点击后).

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

Answer 1

我认为Gourneau的答案是最好的,但它缺少一个很好的接触.要显示"正在加载..."消息,您需要调用showTableMessage函数.

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

请求完成后,onDataReturnInitializeTable函数将自动清除表消息.

我也在我的博客上发布了这个.

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告诉它再次排序,并刷新数据.这也保持了分页顺序.我使用它与搜索框和一些过滤器,所以我可以更改其值并相应地更新表.

Answer 3

假设您有一个 DataTable 实例 myTable：

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

-埃里克