How can I refresh a YUI dataTable with a button?

Question

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 ?

Solution 1

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.

Solution 2

I couldn't get the method that Gourneau posted (it's mentioned all over the place) to work, so i came up with this little hack:

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

you find the current sort method, and then make a call to sortColumn telling it to sort again, and it refreshes the data. this keeps the pagination in order too. I use this with a search box and some filters so I can change their values and update the table accordingly.

Solution 3

Assuming you have a DataTable instance myTable:

myTable.render() will redraw the table; myTable.initializeTable() will blow away all state, including sorts and selections, and redraw

-Eric

Solution 4

I think it will work if you have your button call this function:

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

Solution 5

I don't think I can adequately post all of the code here for your needed solution, but Satyam of Yahoo (a major contributor to YUI at least) has a requery method that he has added an extension for to the Datatable, and has posted example for it. I have used this, and it works beautifully - especially when you need a search function for your tables.

Here is a link to start with, but I would also search under "Satyam requery" for further examples or examples that fit more with your version of the datatable.

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

-Jason

p.s. If you're using server-side data, then a solution that utilizes the onDataReturnInitializeTable method would help, but I think Satyam's solution accounts for this, also, as well as keeping track of your pagination.

View more solutions

Comments

[JohnRudolfLewis]

Thank you! This is the only way I could get the [Loading...] ui to show up again. Thank You!

[JohnRudolfLewis]

The only downside with that is you don't automatically get the 'Loading...' UI while the data is being fetched from the server.

[JohnRudolfLewis]

I found a better way to get the Loading... ui to show up, see my answer.

[Victor Sergienko]

In 2.7, I also had to do myTable.getDataSource().flushCache(), if not changing neither page nor sorting.

[Doug Molineux]

Thank you for this, one question where do you put the parameters for the request in this code? is it inside the single quotes? .sendRequest('myparam=test', { success ...?

[anwarma]

Also, this only works for dynamic data - server side data needs a requery extension offered by Satyam.