7

I'm testing the script:

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

I would like to add a button to refresh(reset) the data. I would reset all modified data and reload first data. I add this code, so after select (refresh), I have no data:

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

    });

What I need to use in my onMenuItemSelect to refresh mydataTable?

I made some changes to modify the "city" and "rating" in the sample : http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

Now, I wish resetting MyTable with a button (and reload default dataset). When I use my code, after button click, I clear all and default data are not reloaded (I have : "No records found." after button click).

How I can reload default data ?

4

5 回答 5

10

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

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

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

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

于 2010-01-08T18:03:42.220 回答
5

我无法让 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 告诉它再次排序，它会刷新数据。这也使分页保持有序。我将它与搜索框和一些过滤器一起使用，以便我可以更改它们的值并相应地更新表格。

于 2009-06-12T02:23:05.693 回答
4

假设您有一个 DataTable 实例 myTable：

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

-埃里克

于 2009-03-04T23:03:17.777 回答
2

我认为如果您的按钮调用此功能，它将起作用：

myDataTable.getDataSource().sendRequest('',
{ success: myDataTable.onDataReturnInitializeTable,scope: myDataTable});
于 2009-04-24T16:49:05.520 回答
2

我认为我无法在此处充分发布您所需解决方案的所有代码，但 Yahoo 的 Satyam（至少是 YUI 的主要贡献者）有一个重新查询方法，他为 Datatable 添加了扩展，并已发布例如。我已经使用了它，它运行良好 - 特别是当您需要为您的表格提供搜索功能时。

这是一个开始的链接，但我也会在“Satyam requery”下搜索更多示例或更适合您的数据表版本的示例。

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

-杰森

ps 如果您使用的是服务器端数据，那么使用 onDataReturnInitializeTable 方法的解决方案会有所帮助，但我认为 Satyam 的解决方案也可以解决此问题，并跟踪您的分页。

于 2011-02-25T20:08:23.640 回答