YUI: Refresh DataTable – Method 2

March 1, 2007 by Doug Leave a reply »

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.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Google Bookmarks
  • BlinkList
  • DZone
  • Live
  • Ma.gnolia
  • Reddit
  • Slashdot
  • SphereIt
  • StumbleUpon

Related

Advertisement

13 Responses

  1. Anonymous says:

    Code does not work.

  2. Lo says:

    Exactement ce que je cherchais. Merci beaucoup !

  3. Lo says:

    Code work perfectly

  4. Data Shaman says:

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

  5. Data Shaman says:

    Formatting broken…

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

  6. John Aguinaldo says:

    In YUI 2.7.0 I had to use the following:

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

  7. imran says:

    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.

  8. fp says:

    Use render. refreshView seems obsolete.

  9. Saidi says:

    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”

  10. Edward says:

    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.

  11. Saidi says:

    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.

  12. Edward says:

    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?

  13. Edward says:

    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.

Leave a Reply