Conflicting behaviour with 2 DataTables within separate jQueryUI tabs

mcnallyr

I have a page which contains 2 DataTables each within their own jQuery UI tab, these are populated via Server Side Web Service requests. The 2 DataTables functioned correctly until recently when I decided to use a custom search box instead of the default search box in each DataTable. I have found that when using a custom search boxes on each DataTable any searches performed in the first DataTable's search box (vleMods, modSrchFilter) are executed against the other DataTable "vleOrgs". Additionally when I try to use the search box for vleOrgs nothing happens at all.

When I remove either DataTable and it's functionality from it's respective tab the other DataTable works fine.

The code utilises the fn.dataTableExt.oApi.fnSetFilteringDelay fucntion from this site which I have left out for simplicity,

[code]
var $j = jQuery.noConflict();

//Tabs
$j(function(){
$j('#tabs').tabs( {selected: <%=strDefaultTab%>} );
});

$j(document).ready(function() {

$j("#ddlTermFilter").change(function(){
$j('#vleMods').dataTable().fnFilter( $j(this).val(), 1 );
});

$j("#modSrchFilter").keyup(function() {
$j('#vleMods').dataTable().fnFilter( $j(this).val(), 0 );
});

var sTermFilter = $j('#ddlTermFilter').val();

var sModDataUrl = "/webapps/UoL-uolMyModules2-bb_bb60/rest/VleUserCourses/getModules/" + <%="'" + username + "'"%>;

$j('#vleMods').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Display images for available column
if ( aData[4] == "Y" )
{
$j('td:eq(4)', nRow).html( '' );
}
else
{
$j('td:eq(4)', nRow).html( '' );
}
},
"bAutoWidth": false,
"bJQueryUI": true,
"iDisplayLength": 10,
"aLengthMenu": [[5, 10, 15, 20, 25], [5, 10, 15, 20, 25]],
"bServerSide": true,
"sAjaxSource": sModDataUrl,
"bDeferRender": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "sInitTerm", "value": sTermFilter } );
aoData.push( { "name": "bShowUnavail", "value": <%=bDisplayUnavail%> } );
},
"bProcessing": true,
"sPaginationType": "full_numbers",
"aoColumns": [
/* Year */ { "sWidth": "25px" },
/* Code */ { "sWidth": "30px", "bVisible": <%=bDisplayCode%> },
/* Title */ { "sWidth": null },
/* Role */ { "sWidth": "30px", "bVisible": <%=bDisplayRole%> },
/* Available */ { "sWidth": "30px", "bVisible": <%=bDisplayAvail%> }
],
"sDom": 'rtlpi'
}).fnSetFilteringDelay(<%=sFilterDelay%>);

$j("#orgSrchFilter").keyup(function(){
$j('#vleOrgs').fnFilter( $j(this).val(), 0 );
});

var organisationDataUrl = "/webapps/UoL-uolMyModules2-bb_bb60/rest/VleUserCourses/getOrganisations/" + <%= "'" + username + "'"%>;

var oOrgs = $j('#vleOrgs').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Display images for available column
if ( aData[2] == "Y" )
{
$j('td:eq(2)', nRow).html( '' );
}
else
{
$j('td:eq(2)', nRow).html( '' );
}
},
"bAutoWidth": false,
"bJQueryUI": true,
"iDisplayLength": 10,
"aLengthMenu": [[5, 10, 15, 20, 25], [5, 10, 15, 20, 25]],
"bServerSide": true,
"sAjaxSource": organisationDataUrl,
"bDeferRender": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "bShowUnavail", "value": <%=bDisplayUnavail%> } );
},
"bProcessing": true,
"sPaginationType": "full_numbers",
"aoColumns": [
/* Title */ null,
/* Role */ { "sWidth": "30px", "bVisible": <%=bDisplayRole%> },
/* Available */ { "sWidth": "25px", "bVisible": <%=bDisplayAvail%> }
],
"sDom": 'rtlpi'
}).fnSetFilteringDelay(<%=sFilterDelay%>);
});



Modules
Organisations




<%
TermData yearCodeData = new TermData();

LinkedHashMap dyOptions = yearCodeData.getFilterTerms(sYearCode);

for(Entry entry : dyOptions.entrySet())
{
if (strDefaultYear.equals(entry.getValue())) {
out.println("" + entry.getKey() + "");
} else {
out.println("" + entry.getKey() + "");
}
}
%>





Year
Code
Title
Role
Available











Name
Role
Available







[/code]

mcnallyr

**** Update ****

I have since tried this with DataTables 1.9 my code exhibits the same behaviour.