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?

Answer 1

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

Answer 2

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 3

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

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

Answer 4

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.

Answer 5

Hallo, please help me. I could not reload right the DataSource of the DataTable component. The DataSource I get from mySQl. When I want to refresh my data (previously change some data into the base) using methods above or just by reloading the page (F5), nothig was happen. I have took into acount that when I click to the field for sorting: in one direction it show right result...in another - old list of data???...This is my code:

YAHOO.example.DynamicData = function() { // Column definitions var myColumnDefs = [ // sortable:true enables sorting {key:"ID", label:"ID", sortable:true}, {key:"Date", label:"Date", sortable:true}, {key:"Time", label:"Time" /, formatter:"date"/ }, {key:"TotalCharge", label:"TotalCharge", sortable:true}, {key:"TotalEnergy", label:"TotalEnergy", sortable:true}, {key:"MaxPeak", label:"MaxPeak", sortable:true}, {key:"NumbOfStrokes", label:"NumbOfStrokes", sortable:true}, {key:"jpgID", label:"jpgID", sortable:true} ];

// Custom parser
var stringToDate = function(sData) {
    var array = sData.split("-");
    return new Date(array[1] + " " + array[0] + ", " + array[2]);
};

// DataSource instance
var myDataSource = new YAHOO.util.DataSource("json_proxy.php?");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
    resultsList: "records",
    fields: [
 {key:"ID", parser:"number"},
 {key:"Date"},
 {key:"Time" /*parser:stringToDate*/ },
 {key:"TotalCharge",parser:"number"},
 {key:"TotalEnergy",parser:"number"},
 {key:"MaxPeak",parser:"number"},
 {key:"NumbOfStrokes",parser:"number"},
 {key:"jpgID"}
    ],
    metaFields: {
        totalRecords: "totalRecords" // Access to value in the server response
    }
};

// DataTable configuration
var myConfigs = {
    initialRequest: "sort=ID&dir=asc&startIndex=0&results=25", // Initial request for first page of data
    dynamicData: true, // Enables dynamic server-driven data
    sortedBy : {key:"ID", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
    paginator: new YAHOO.widget.Paginator({ rowsPerPage:25 }) // Enables pagination 
};

// DataTable instance
var myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs);
// Update totalRecords on the fly with value from server
myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
    oPayload.totalRecords = oResponse.meta.totalRecords;
    return oPayload;
}

return {
    ds: myDataSource,
    dt: myDataTable
};

}();

Answer 6

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.