Mutliple paginated tables

Hi there,

First, congrats for such a useful plug-in.
As I'm new to DataTables, I'm not sure if I'm doing this in the right way but here we go...

So, I have a page with multiple tables, each one with its own pagination (controls) and server-side processing. As the number of these tables can vary in my case, I'm creating many target tables (html) dynamically. Further, I'm doing the same with the DataTable initialisation code as shown below.

However, after getting all the tables populated, when changing any page of those tables I'm getting an IndexOutOfBounds Exception. It says that the variable "tableId", which I used to initialise each table, is now "myList.length + 1". In other words, each table doesn't hold the "tableId" parameter that was sent to the server during its initialisation. Why is it?

Maybe, I'm approaching this problem in the wrong way. But I looked over "http://datatables.net/release-datatables/examples/basic_init/multiple_tables.html" and it didn't help me much.

Could anybody out there help me to figure out the solution?

Thanks in advance.

/ Leo

----

JSP:

<c:set var="count" value="0" scope="page" />
<div id="container" style="display: none">
<legend>My Tables</legend>
<c:forEach var="tableTitle" items="${myList}">
<b>Title: ${tableTitle}</b></br>
<table id="table_${count}" class="display">
<thead>
<tr>
<th>Name</th>
<th>E-mail address</th>
<th>Date</th>
</tr>
</thead>
</table><br/>
<c:set var="count" value="${count + 1}" scope="page"/>
</c:forEach>
</div>


JavaScript:

$(document).ready(function() {

for (var tableId = 0 ; i < ${fn:length(myList)}; tableId++ ) {

$('#table_'+tableId).dataTable( {
"bServerSide": true,
"bProcessing": true,
"sPaginationType": "bootstrap",
"sAjaxSource": "statistics/getData",
"bFilter": false,
"bSort": false,
"bInfo": false,
"bJQueryUI": true,
"sDom": '<"top"l>rt<"toolbar">frt<"bottom"p><"clear">',
"oLanguage":{
"sLengthMenu": "Display _MENU_",
},
"aoColumns": [
{ "mDataProp": "name" },
{ "mDataProp": "email" },
{ "mDataProp": "date" }
],
"fnServerParams": function ( aoData ) {
aoData.push({"name" : "versionId", "value" : ${versionId}});
aoData.push({"name" : "id", "value" : ${param.id}});
aoData.push({"name" : "tableId", "value" : tableId }); <--"Gets a wrong value when changing pages."
},
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
});
}
});

$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
});
}
});