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 ?

score 10 · Answer 1 · answered Jan 08 '10 at 18:03

10

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.

answered Jan 08 '10 at 18:03

JohnRudolfLewis

1,692
1
18
33

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 ...? – Doug Molineux Jan 11 '11 at 20:37

score 5 · Answer 2 · answered Jun 12 '09 at 02:23

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.

Thank you! This is the only way I could get the [Loading...] ui to show up again. Thank You! — JohnRudolfLewis, Oct 21 '09 at 20:33
I found a better way to get the Loading... ui to show up, see my answer. — JohnRudolfLewis, Jan 08 '10 at 18:04

score 4 · Answer 3 · answered Mar 04 '09 at 23:03

4

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

answered Mar 04 '09 at 23:03

Eric Miraglia

1,209
8
9

In 2.7, I also had to do `myTable.getDataSource().flushCache()`, if not changing neither page nor sorting. – Victor Sergienko May 17 '10 at 15:11

JasonMichael · Answer 4 · 2011-02-25T20:16:49.617

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.

score 2 · Answer 5 · answered Apr 24 '09 at 16:49

2

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

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

answered Apr 24 '09 at 16:49

Gourneau

12,660
8
42
42

The only downside with that is you don't automatically get the 'Loading...' UI while the data is being fetched from the server. – JohnRudolfLewis Jan 08 '10 at 18:00
Also, this only works for dynamic data - server side data needs a requery extension offered by Satyam. – JasonMichael Feb 25 '11 at 20:13

How can I refresh a YUI dataTable with a button?

5 Answers5

Linked