Select the datatable instance in a function under fnServerData
Select the datatable instance in a function under fnServerData
matthttam
Posts: 40Questions: 2Answers: 0
Hell again!
I don't completely understand things in javascript so I was hoping someone could answer this question.
The following code works great! And it is repeated on all 4 tables. I wanted to create a function for it and send the variables I need but that won't work for some reason. Here is the code I am talking about:
Works:
[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* ... additional variables ... */
$.getJSON( sSource, aoData, function (json) {
if(json.error == 'expired'){
timeoutLogoff();
}else{
/* Create the select elements on the first run */
if ( json.sEcho == 1 )
{
build_dropdowns('Assignments',json,oTable);
}
/* DataTables callback */
fnCallback(json)
}
} );
}
[/code]
note that build_dropdowns is a function that will create teh drop downs based off the json data. Here is it's code:
[code]
function build_dropdowns(tableID, json, refName){
$("#"+tableID+" tfoot th.dropdown").each( function () {
index = refName.fnVisibleToColumnIndex($(this).index());
$(this).html(fnCreateSelect(json.select[index], index));
$('select', $(this)).change( function () {
refName.fnFilter( $(this).val(), refName.fnVisibleToColumnIndex($(this).parent().index() ));
} );
} );
}
[/code]
Notice how this function needs the refName (like oTable or wTable) to call fnFilter etc... I couldn't figure out a way to get the instance of datatable based off the ID of the table.
So, I changed fnServerData to this:
[code]
//**in the global scope area at the top of the page**//
function build_fnServerData(table,refName,sSource, aoData,fnCallback){
$.getJSON( sSource, aoData, function (json) {
if(json.error == 'expired'){
timeoutLogoff();
}else{
if ( json.sEcho == 1 ) {
build_dropdowns(table,json,refName); // Create the select elements on the first run
}
return fnCallback(json)
}
} );
}
/* ... */
//**in the wTable datatable setup area**//
"fnServerData": function ( sSource, aoData, fnCallback ) {
build_fnServerData('WO',wTable,sSource, aoData,fnCallback);
}
[/code]
I don't know the best solution. Is there a way to reference wTable dynamically?
When I pass wTable from fnServerData it says "wTable not defined" but if I hard code wTable into the build_dropdowns function within build_fnServerData it will work... Is this because getJSON is asyncronous so when getJSON is called the datatables object is created? Is there a way to dynamically get the datatable instance like $('#WO').thisInstanceOfDatatables? Should I pass a string (or have a global has value to convert) and use eval to use the correct variable name when it is needed?
Thanks for the help!
I don't completely understand things in javascript so I was hoping someone could answer this question.
The following code works great! And it is repeated on all 4 tables. I wanted to create a function for it and send the variables I need but that won't work for some reason. Here is the code I am talking about:
Works:
[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* ... additional variables ... */
$.getJSON( sSource, aoData, function (json) {
if(json.error == 'expired'){
timeoutLogoff();
}else{
/* Create the select elements on the first run */
if ( json.sEcho == 1 )
{
build_dropdowns('Assignments',json,oTable);
}
/* DataTables callback */
fnCallback(json)
}
} );
}
[/code]
note that build_dropdowns is a function that will create teh drop downs based off the json data. Here is it's code:
[code]
function build_dropdowns(tableID, json, refName){
$("#"+tableID+" tfoot th.dropdown").each( function () {
index = refName.fnVisibleToColumnIndex($(this).index());
$(this).html(fnCreateSelect(json.select[index], index));
$('select', $(this)).change( function () {
refName.fnFilter( $(this).val(), refName.fnVisibleToColumnIndex($(this).parent().index() ));
} );
} );
}
[/code]
Notice how this function needs the refName (like oTable or wTable) to call fnFilter etc... I couldn't figure out a way to get the instance of datatable based off the ID of the table.
So, I changed fnServerData to this:
[code]
//**in the global scope area at the top of the page**//
function build_fnServerData(table,refName,sSource, aoData,fnCallback){
$.getJSON( sSource, aoData, function (json) {
if(json.error == 'expired'){
timeoutLogoff();
}else{
if ( json.sEcho == 1 ) {
build_dropdowns(table,json,refName); // Create the select elements on the first run
}
return fnCallback(json)
}
} );
}
/* ... */
//**in the wTable datatable setup area**//
"fnServerData": function ( sSource, aoData, fnCallback ) {
build_fnServerData('WO',wTable,sSource, aoData,fnCallback);
}
[/code]
I don't know the best solution. Is there a way to reference wTable dynamically?
When I pass wTable from fnServerData it says "wTable not defined" but if I hard code wTable into the build_dropdowns function within build_fnServerData it will work... Is this because getJSON is asyncronous so when getJSON is called the datatables object is created? Is there a way to dynamically get the datatable instance like $('#WO').thisInstanceOfDatatables? Should I pass a string (or have a global has value to convert) and use eval to use the correct variable name when it is needed?
Thanks for the help!
This discussion has been closed.
Replies
[code]
build_dropdowns(table,json,eval(varLookup[table]));
/* where varLookup is */
var varLookup = {'WO':'wTable'};
[/code]
The key thing to know here is that the DataTables callbacks are executed with the scope of the DataTables instance. That means that `this` is your instance. For example:
[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
var that = this;
$.getJSON( sSource, aoData, function (json) {
if(json.error == 'expired'){
timeoutLogoff();
}else{
/* Create the select elements on the first run */
if ( json.sEcho == 1 )
{
build_dropdowns('Assignments',json, that);
}
/* DataTables callback */
fnCallback(json)
}
} );
}
[/code]
Note how I've used `that` in your `build_dropdowns` function. `that` has been assigned `this` at the top of the function - `this` where `build_dropdowns` is called related to the getJSON callback which is why this is needed!
Allan
Thanks for the this thing though. I'll console.log 'this' and see if I can find the ID of the table in it. This would reduce the complexity of my function calls a bit.
Thanks for the help.
Bil
[code]
function build_fnServerData(that,sSource, aoData,fnCallback){
$.getJSON( sSource, aoData, function (json) {
if(json.error == 'expired'){
timeoutLogoff();
}else{
if ( json.sEcho == 1 ) {
build_dropdowns(that,json); // Create the select elements on the first run
}
return fnCallback(json);
}
} );
}
function build_dropdowns(that, json){
$(that.selector+" tfoot th.dropdown").each( function () {
index = that.fnVisibleToColumnIndex($(this).index());
$(this).html(fnCreateSelect(json.select[index], index));
$('select', $(this)).change( function () {
that.fnFilter( $(this).val(), that.fnVisibleToColumnIndex($(this).parent().index() ));
} );
} );
}
/* ... snippet from dataTable() initialization ... */
"fnServerData": function ( sSource, aoData, fnCallback ) {
build_fnServerData(this,sSource, aoData,fnCallback);
}
[/code]
That makes a jQuery object of the current object. That might or might not be what you want. It typically isn't with a DataTables instance.
However, good to hear you got a solution that works for you :-)
Allan