How can I refresh a YUI dataTable with a button?

datatable yui
fabien picture fabien · Mar 4, 2009 · Viewed 18.6k times · Source

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 ?

Answer

JohnRudolfLewis picture JohnRudolfLewis · Jan 8, 2010

I think Gourneau's answer is the best, but it is missing one nice touch. In order to get the 'Loading...' message to display, you need to make a call to the showTableMessage function.

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

When the request is finished, the onDataReturnInitializeTable function will automatically clear the table message.

I posted this on my blog as well.

Related questions

"Endless scrolling" effect in a HTML table

I am displaying a scrolled data table in a web page. This table has several thousands of dynamic rows, so it is loaded from the server (via AJAX). The user can scroll up and down, so what I need is …

Read More
LINQ query on a DataTable

I'm trying to perform a LINQ query on a DataTable object and bizarrely I am finding that performing such queries on DataTables is not straightforward. For example: var results = from myRow in myDataTable where results.Field("RowNo") == 1 select results; This …

Read More
How to create a DataTable in C# and how to add rows?

How do create a DataTable in C#? I did like this: DataTable dt = new DataTable(); dt.clear(); dt.Columns.Add("Name"); dt.Columns.Add("Marks"); How do I see the structure of DataTable? Now I want to add ravi for …

Read More