associating a form with a table when initializing multiple dataTables

dnagirl

I've been using dataTable both to display data and as a pick list for an edit form. This works well if I know the ids of the table and form pair from the beginning. This is what I've been doing:

[code]
submitfilebutton= function(){
return (($('form#uploader input[name="file_id"]').val()>0) ? 'Edit' : 'Add');
};//set the text of the form submit button according to whether there is a row selected

file_row_init=$("#ProtocolFile tr td:first-child").filter(
function() {
return $(this).text() == $('input[name="file_id"]').val();
}
).closest("tr"); //choose a table row to highlight based on the form's value

ffiletable=$('#ProtocolFile').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"bStateSave": true,
"sDom": '<"H"if>tr<"F"lTp>',
"aoColumnDefs":[{'bVisible':false, 'aTargets':[0]}],
"oTableTools": {
"sRowSelect": "single",
"sSwfPath": "media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [],// no buttons
"fnRowSelected": function(node){
aData = ffiletable.fnGetData(node);
context=ffiletable.oForm; //this is the CRUX
$('input[name="file_id"]',$(context)).val(aData[0]);
$('textarea[name="description"]',$(context)).val(aData[2]);
$('input[name="FileRecord"]',$(context)).val(submitfilebutton());
$('input[type="submit"][name^="Delete"]',$(context)).show();
},
"fnRowDeselected": function(node){
aData = ffiletable.fnGetData(node);
context=ffiletable.oForm;
var f=$(':input',$(context));
$(f).find("option").removeAttr("selected");
$(f).filter('[name="file_id"],[name="description"]').val(undefined);
$('input[name="FileRecord"]',$(context)).val(submitfilebutton());
$('input[type="submit"][name^="Delete"]',$(context)).hide();
$('input[name="FileRecord"]',$(context)).siblings('span').remove();
$('.msg,.warning',$('#fishfileform'),$(context)).remove();
}
}
});

ffiletable.oForm=$('#carefileform form[name="uploader"]'); //associate form with dataTable obj
if(!jQuery.isEmptyObject(file_row_init)) file_row_init.trigger('click');//when page first loads, select table row that matches initial count_id value
[/code]

But what happens if I need to have several of the same sort of table/form pairs on the same page? My code outputs a table/form pair for each of the items it's displaying. The idea is that any item may have an associated set of files. So the resulting html (before dataTables does it's thing looks something like this:

[code]

Item X


Col1
Col2






col1
col2





1x
2x







Item Y


Col1
Col2






col1
col2





1y
2y







Item Z


Col1
Col2






col1
col2





1z
2z





[/code]

What I'd like to do is initialize all the tables together, something like this:
[code]
ffiletables=$('.dtg').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"bStateSave": true,
"sDom": '<"H"if>tr<"F"lTp>',
"aoColumnDefs":[{'bVisible':false, 'aTargets':[0]}],
"oTableTools": {
"sRowSelect": "single",
"sSwfPath": "media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [],// no buttons
"fnRowSelected": function(node){
aData = WHAT GOES HERE???
context=WHAT GOES HERE???
$('input[name="file_id"]',$(context)).val(aData[0]);
$('textarea[name="description"]',$(context)).val(aData[2]);
$('input[name="FileRecord"]',$(context)).val(submitfilebutton());
$('input[type="submit"][name^="Delete"]',$(context)).show();
},
"fnRowDeselected": function(node){
aData = WHAT GOES HERE???
context=WHAT GOES HERE???
var f=$(':input',$(context));
$(f).find("option").removeAttr("selected");
$(f).filter('[name="file_id"],[name="description"]').val(undefined);
$('input[name="FileRecord"]',$(context)).val(submitfilebutton());
$('input[type="submit"][name^="Delete"]',$(context)).hide();
$('input[name="FileRecord"]',$(context)).siblings('span').remove();
$('.msg,.warning',$('#fishfileform'),$(context)).remove();
}
}
});
[/code]
But I can't figure out how to efficiently associate the correct form with each instance of a dataTable. Ideas?

allan

Sounds fair. To get the data you could do:

[code]
var table = $(node).parents('table')[0];
aData = $(table).dataTable();
[/code]

and to get the context you could do:

[code]
context = $(node).parents('div.fs')[0];
[/code]

Allan

dnagirl

Thanks for the pointers. I'm starting to get somewhere now. When I initialize dataTables like this:

[code]
$(document).ready(function(){

$('.dtg').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bStateSave": true,
"sDom": '<"H">tr<"F"T>',
'sScrollX':'100%',

"oTableTools": {
"sRowSelect": "single",
"sSwfPath": "media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [],// no buttons
"fnRowSelected": function(node){
var table = $(node).parents('table')[0];
aData = $(table).dataTable().fnGetData(node);
context = $(table).parents('div.fs')[0];
console.log(context);

$('input[name="col1"]',$(context)).val(aData[0]);
$('input[name="col2"]',$(context)).val(aData[1]);
},
"fnRowDeselected": function(node){
var table = $(node).parents('table')[0];
aData = $(table).dataTable().fnGetData(node);
context = $(node).closest('div.fs')[0];
console.log(context);
$('input[name="col1"]',$(context)).val(undefined);
$('input[name="col2"]',$(context)).val(undefined);
}
}
});
});
[/code]

selecting/deselecting from the first table populates/clears the first form. Unfortunately, nothing happens with the 2nd or 3rd table. It does not matter if I select from tables y or z before table x or not.

I've saved a jsbin example here: http://live.datatables.net/okixim/14/ (Nightly with latest TT) and here http://live.datatables.net/okixim/15 (1.8.2 with latest TT) both of which fail slightly differently from my local test (1.9.0 CDN + local TT 2.0.2). My local example successfully applies dataTables to all the tables but cannot select/deselect except on the first table.

Any suggestions?

dnagirl

So far as I can determine, what appears to be happening is that the first table gets a TableTools object on dataTable initialization. But subsequent tables do not get a TableTools object. I've overcome this by wrapping the initialization in an .each(), like so:

[code]
$(document).ready(function(){

$('.dtg').each(function(){
$(this).dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bStateSave": true,
"sDom": '<"H">tr<"F"T>',
'sScrollX':'100%',

"oTableTools": {
"sRowSelect": "single",
"sSwfPath": "media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [],// no buttons
"fnRowSelected": function(node){
var table = $(node).parents('table');
aData = $(table).dataTable().fnGetData(node);
context = $(table).parents('div.fs');

$('input[name="col1"]',$(context)).val(aData[0]);
$('input[name="col2"]',$(context)).val(aData[1]);
},
"fnRowDeselected": function(node){
var table = $(node).parents('table');
aData = $(table).dataTable().fnGetData(node);
context = $(node).closest('div.fs');
$('input[name="col1"]',$(context)).val(undefined);
$('input[name="col2"]',$(context)).val(undefined);
}
}
});
})
});

[/code]