Extension methods not available when loading
Extension methods not available when loading
Extensions methods are not available when loading a page. E.g. I've added an extension to automatically add query parameters from html controls that have the "searchparam" class atrtribute.
[code]
$.fn.dataTableExt.oApi.fnSetDisplayStart = function(oSettings, aoData) {
// Autobind the extra search params
$(".searchparam").each(function() {
aoData.push({ "name": this.id, "value": $("#" + this.id).val() });
});
}
[/code]
I then try to use this extension as follows
[code]
var tbl1;
$(document).ready( function() {
tbl1 = $("#table1").dataTable( {
"bStateSave": true, "sAjaxSource": "/getAjaxData", "bServerSide": true, "fnServerData": getServerData
});
});
// ...
function getServerData(sSource, aoData, fnCallback ) {
// this next line causes an error
tblManualCRRReferrals.fnSetDisplayStart(aoData);
// tell DataTables to fetch the data
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
});
}
[/code]
The problem is that the global var "tbl1" has not been assigned when getServerData is first called as the page is loading. Therefore the extension method is not available. A work around is to put a conditional test in the getServerData function to check if the global var has been assigned, and exit the function if it is not yet available. However this would then need another call to the function added when the page has completed loading.
A better way IMO, and a true fix, is to only call the fnServerData method once the extensions have been loaded. Is this possible to implement ? (However it may not solve the fact that the global var would not have been assigned !)
[code]
$.fn.dataTableExt.oApi.fnSetDisplayStart = function(oSettings, aoData) {
// Autobind the extra search params
$(".searchparam").each(function() {
aoData.push({ "name": this.id, "value": $("#" + this.id).val() });
});
}
[/code]
I then try to use this extension as follows
[code]
var tbl1;
$(document).ready( function() {
tbl1 = $("#table1").dataTable( {
"bStateSave": true, "sAjaxSource": "/getAjaxData", "bServerSide": true, "fnServerData": getServerData
});
});
// ...
function getServerData(sSource, aoData, fnCallback ) {
// this next line causes an error
tblManualCRRReferrals.fnSetDisplayStart(aoData);
// tell DataTables to fetch the data
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
});
}
[/code]
The problem is that the global var "tbl1" has not been assigned when getServerData is first called as the page is loading. Therefore the extension method is not available. A work around is to put a conditional test in the getServerData function to check if the global var has been assigned, and exit the function if it is not yet available. However this would then need another call to the function added when the page has completed loading.
A better way IMO, and a true fix, is to only call the fnServerData method once the extensions have been loaded. Is this possible to implement ? (However it may not solve the fact that the global var would not have been assigned !)
This discussion has been closed.
Replies
Good timing with your post :-). DataTables 1.7 beta, which has just been release, takes exactly this scenario into consideration. What happens now is that the callback functions such as fnServerData are executed witht he scope of the DataTables object. What this means is that 'this' inside the callback function is the DataTables object ("tbl1" in this case). An example of this in action: http://datatables.net/beta/1.7/examples/api/api_in_init.html
Perhaps give 1.7 beta a go and see if this does the trick for you: http://datatables.net/download
Regards,
Allan
Looks a good solution, I'll take it for a spin later.
And hey - what's with the "fakebike" :)
Allan