Submit input for Multiple Tables.

juxta52

Hello, I'm rather new with jQuery and Datatables, but I was able to get it working on several pages. There is a glitch in one of the pages I am supporting though. It has Multiple tables setup similar to the example. Each table has a: "class='display dataTable' " and it works very well with the submit button given in the example as well when there is only 1 datatable within scope.

On this particular page, i have multiple datatables and the submit button is picking up check boxes checked in the FIRST dataTable and NOT the Second dataTable. The boxes are setup identically and it 'should' work. I'm wondering if there's a quick fix or you'll need additional information in order for me to get the submit button working for multiple tables on the same page.

Thanks,
Alan

juxta52

This is the code in my jsp to initialize the tables:
[code]
var oTable;

$(document).ready(function() {
$('#relationshipForm').submit( function() {

var sData = $('input', oTable.fnGetNodes()).serialize();

if (sData.length==0){
alert("You must select at least 1 checkbox.");
return false;
} else {
document.getElementById("relationshipKey").value = sData;
alert( "The following data would have been submitted to the server: \n\n=" + sData);
return true;
}
} );

oTable = $('.dataTable').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers"
} );
} );
[/code]

I have two datatables that are initialized like:
[code]

.....



.....

[/code]

Both of the tables display property, and all the functionality 'work'. Except for the 'submit' button.
The code for the submit button is:
[code]



[/code]

This will submit the checked items in TABLE 1, but NOT the checked items in TABLE 2, and so on.

I hope this is enough information. If not please let me know... Thanks!

juxta52

Has anyone ever run into this issue, or have Multiple tables setup with 1 'submit' button? The reasoning I wish to have it set up like this is because... I have many different Items.... each item contains a list of attributes... So it looks something like this:

Table 1 - Item 1
Attribute 1
Attribute 12
Attribute 13
Attribute 14


Table 2 - Item 2
Attribute a2
Attribute 1s2
Attribute 13f
Attribute 1s4


Table 3 - Item 3
Attribute 41
Attribute 122
Attribute 113
Attribute 164

I will have operations in each of the rows of each of the tables that ultimate uses javascript to manipulate the value in the checkbox assigned to that row. I want a submit button that gathers up 'ALL' of the input's on all of the tables combined and returns it to the server in 1 string.

Any advice?

allan

The trick here are these two snippets:

[code]
oTable.fnGetNodes();
oTable = $('.dataTable').dataTable( ... );
[/code]
The API functions, by default, will refer to only the first table instance that was created. However, you can change to using $.fn.dataTableExt.iApiIndex ( http://datatables.net/development/ ) to tell it to check a different table. So:

[code]
$.fn.dataTableExt.iApiIndex = 1;
oTable.fnGetNodes();
[/code]
will get the nodes for the second table.

Hope this helps!
Allan

juxta52

Allan,

Thanks for your response!

Will: $.fn.dataTableExt.iApiIndex = 1; be for JUST the 2nd table? What if i'm not SURE how many tables will be generated on the page, sometimes there are 1, or 2, or 12?

Thanks,
Alan

allan

Yes, $.fn.dataTableExt.iApiIndex = 1 is just for the first table. If you need to know how many tables are created, you could just do oTable.length - and then loop over that if setting iApiIndex as needed, if you want to get all of the nodes.

Regards,
Allan