Back to the index of articles and examples

DataTable Requery

This page shows my requery custom method for YUI DataTable:

YAHOO.widget.DataTable.prototype.requery = function(newRequest) {
	var ds = this.getDataSource();
	if (ds instanceof YAHOO.util.LocalDataSource) {
		ds.liveData = newRequest;
		ds.sendRequest("",
			{
				success: this.onDataReturnInitializeTable,
				failure: this.onDataReturnInitializeTable,
				scope: this
			}
		);
	} else {
		ds.sendRequest(
			(newRequest === undefined?this.get('initialRequest'):newRequest),
			{
				success: this.onDataReturnInitializeTable,
				failure: this.onDataReturnInitializeTable,
				scope: this
			}
		);
	}
};

The method has to be included in the page that will use it at any time after the source code for the DataTable gets loaded but before any DataTable is instantiated. The method accepts a single argument which is the new request which depends of the nature of the DataSource used. For LocalDataSources, it has to be the new set of data to be loaded. For all the rest is an argument of the same nature as that initially provided in the initialRequest configuration attribute of the DataTable. In this case, if not provided, the requery will use the same values as set initially.

Below you will find three DataTables, the first one built using an XHRDataSource on remote JSON data, the second a LocalDataSource on a local array and the third using a function data source. The two last examples actually use the same source of data as the first which is first fetched from the same remote source via Connection Manager, parsed with the YUI JSON parser and stored in a local variable so, in the end, it is a local array for the purpose of the DataSource.

Each table has a 'requery' button. The code for them is:

// remote DataSource
Event.on('requeryXHR','click',function() {
	dtXHR.requery('startIndex=10&results=8');
});

// Local Data Source
Event.on('requeryLocal','click',function() {
	dtLocal.requery(data.slice(10,18));
});

// Function Data Source
Event.on('requeryFunction','click',function() {
	dtFunction.requery({
		startIndex: 10,
		endIndex:18
	});
});

The first XHRDataSource was instantiated with the base URL of the server page providing the data and the extra URL arguments, stating the startIndex and number of records expected, was given in the initialRequest configuration attribute of the DataTable. The requery takes a different string to be used as URL arguments which will be appended to the same base URL.

The second, a LocalDataSource, was instantiated with a slice of the big array of data fetched via Connection Manager. On doing the requery, we provide a different slice of that same data.

The third, a FunctionDataSource, was instantiated with the code of the function that will retrieve the data. The function simply returns a slice of the very same data that the previous DataTable uses. To tell the function which slice of the data we want, we provide an initialRequest configuration attribute to the DataTable with an object literal containing the start and end indexes. On doing the requery, we simply provide a different set of arguments, the function remains the same.

This does not work with server side paging and/or sorting.

Using Remote DataSource via XHR

Using Local DataSource

Using Function DataSource