As mentioned in the previous post the way I refreshed a datatable widget after a change in the data was to reinstantiate the table. The way I did this was to simply make my widgets configuration and creation into a functin which I could then call at will whenever I needed it to take on new data.
However, a new method has sprang up that seems much better. Although slightly less intuitive. There’s a method called
myDataTable.getRecordSet().replace(newData); // replaces the data with the newest set
myDataTable.paginateRows(); // re-paginates the table
myDataTable.showPage(0); // shows first page
This also executes marginally faster than rebuilding the entire table.
Code does not work.
Exactement ce que je cherchais. Merci beaucoup !
Code work perfectly
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);
Formatting broken…
datatable.getDataSource().sendRequest(
datatable._request,
datatable.onDataReturnInitializeTable,
datatable
);
In YUI 2.7.0 I had to use the following:
myDataTable.getRecordSet().replaceRecords(newData)
myDataTable.refreshView()
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.
Use render. refreshView seems obsolete.
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”
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.
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.
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 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.