Comments on: YUI: Refresh DataTable – Method 2

By: Edward

Edward — Mon, 15 Feb 2010 09:34:10 +0000

By the way, I have took into acount that when I enabled/disabled in DataTable-configurations option “dynamic server-driven data” in FireFox you filled this changings straight away but in IE it doesn’t work! This option perfect work with FireFox but how I can force work it in IE? Please help any one, becouse I am facing with this problem during a half of year and couldn’t solved it yet. Thank’s for any help.

By: Edward

Edward — Sun, 14 Feb 2010 20:17:33 +0000

Hallo again. I’ve tried your method, thank’s, however it doesn’t work. In case when i test the code in FireFox – i work correct. With IE – no chance. Only in one case it works correct in IE – when I click sorting by mouse in column. Could any one clarify me how i can manually call function responsible for this sorting in the table?

By: Saidi

Saidi — Mon, 17 Aug 2009 02:32:55 +0000

Hello Edward:
Please try it like
function refreshGrid(gridObj){
gridObj.initializeTable();
gridObj.doBeforePaginatorChange();
var dpage = gridObj.get(‘paginator’);
dpage.fireEvent(‘changeRequest’,dpage.getState({‘page’:1}));
}
gridObj:your grid instance.

By: Edward

Edward — Mon, 27 Jul 2009 11:04:13 +0000

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:
// Code example
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
};

}();

Please anyone explain what and where I must put a code for refreshings? Thank’s.

By: Saidi

Saidi — Thu, 25 Jun 2009 05:59:38 +0000

var callback = {
success:myDataTable.onDataReturnInitializeTable,
failure:myDataTable.onDataReturnInitializeTable,
argument : myDataTable.getState(),
scope:myDataTable
};
myDataTable.doBeforePaginatorChange();
myDataTable.getDataSource().sendRequest(myReqBuilder(myDataTable.getState(),false),callback);

note:’myReqBuilder’ is a function.It return the string like “startIndex=0&results=20&staffNoOrName=aa”

By: fp

fp — Fri, 19 Jun 2009 14:52:53 +0000

Use render. refreshView seems obsolete.

By: imran

imran — Wed, 17 Jun 2009 00:27:33 +0000

Hi John Aguinaldo,

By refresh u mean auto refresh or on reload (f5 key) ?

how to refresh table without page refresh?

any function in YUI for auto-refresh after some interval..!!

i don want to use timer in js.

By: John Aguinaldo

John Aguinaldo — Sat, 18 Apr 2009 16:06:19 +0000

In YUI 2.7.0 I had to use the following:

myDataTable.getRecordSet().replaceRecords(newData)
myDataTable.refreshView()

By: Data Shaman

Data Shaman — Wed, 17 Dec 2008 16:22:35 +0000

Formatting broken…

datatable.getDataSource().sendRequest(
datatable._request,
datatable.onDataReturnInitializeTable,
datatable
);

By: Data Shaman

Data Shaman — Wed, 17 Dec 2008 16:21:23 +0000

This works for me with a datasource. I store the request in a property called _request when the datatable is created and the first request goes out.

datatable.getDataSource().sendRequest(datatable._request, datatable.onDataReturnInitializeTable, datatable);