How to modify DataTable table after it's constructed

Question

I would like to modify a YUI DataTable as ajax queries get completed. So for example, i have 4 ajax queries querying for things which takes anywhere from 1s to 10s to complete. I would like to start constructing the table when the 1s query finish, and modify the table again every time a ajax query finishes. Is there a recommended way of doing this in general?

In particular, i would like to change how the column is formatted to display any potential errors that occurs while processing a row. However, the error processes slowly, so it would be beneficial to display the data first and then add on the errors later.

Thanks a lot for any help!

Jason

Answer 1

I'm presuming your multiple requests are aggregating column data. I'm also assuming the table is static (not server side paging or sorting).

1. Set up the column definition for the DataTable to include all the columns from all sources.
2. Create a DataSource pointing to the service url of the fastest query.
3. Instantiate the DataTable with that DataSource.
4. Either create more DataSources for the other services, or call YAHOO.util.Connect.asyncRequest(...) for each other service
5. The callbacks for each of these service requests should do something along these lines:

(pseudo-code ahead)

function callback(data) {
    var recordset = myDataTable.getRecordSet(),
        records = recordset.getRecords(),
        i, len, rec;

    for (i = 0, len = records.length; i < len; ++i) {
        rec = records[i].getData(); // will return an object literal with data info
        /* match the record object to the new data and update the record object */
    }

    recordset.setRecords(records);
    myDataTable.render();
}

So each additional service will add data at the Record level, then the full table UI will be updated.

HTH