DataTables

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,

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( '<img src="/webapps/UoL-uolMyModules2-bb_bb60/images/dialog_ok_apply.png" alt="Available" title="Available" width="16"    height="16"/>' );
       }
       else
       {
         $j('td:eq(4)', nRow).html( '<img src="/webapps/UoL-uolMyModules2-bb_bb60/images/editdelete.png" alt="Unavailable" title="Unavailable" width="16" height="16"/>' );  
       }
  },
 "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( '<img src="/webapps/UoL-uolMyModules2-bb_bb60/images/dialog_ok_apply.png" alt="Available" title="Available" width="16" height="16"/>' );
   }
   else
   {
     $j('td:eq(2)', nRow).html( '<img src="/webapps/UoL-uolMyModules2-bb_bb60/images/editdelete.png" alt="Unavailable" title="Unavailable" width="16" height="16"/>' );  
   }
},
 "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%>);  
});

<div id="tabs">
  <ul>
    <li><a href="#tabs-mods">Modules</a></li>
    <li><a href="#tabs-orgs">Organisations</a></li>
  </ul>
		
  <div id="tabs-mods">
    <select name="ddlTermFilter" id="ddlTermFilter">
      <% 
        TermData yearCodeData = new TermData();
						
	LinkedHashMap<String, String> dyOptions = yearCodeData.getFilterTerms(sYearCode);
	
	for(Entry<String, String> entry : dyOptions.entrySet()) 
	{							
	  if (strDefaultYear.equals(entry.getValue())) {
	    out.println("<option selected value=\"" + entry.getValue() + "\">" + entry.getKey() + "</option>");
	  } else {
	    out.println("<option value=\"" + entry.getValue() + "\">" + entry.getKey() + "</option>");
	  }
	}	
     %>
   </select>
   <input type="text" id="modSrchFilter" placeholder="Search" class="modSrchFilterStyle" />
     <table id="vleMods" class="datatable">
       <thead>
         <tr>
	   <th>Year</th>
	   <th>Code</th>
	   <th>Title</th>
	   <th>Role</th>
	   <th>Available</th>
	 </tr>
       </thead>
	<tbody>
	</tbody>
      </table>
      </div>
      <div id="tabs-orgs">
        <input type="text" id="orgSrchFilter" placeholder="Search" class="orgSrchFilterStyle" />
	<table id="vleOrgs" class="datatable">
	  <thead>
		<tr>
	   	  <th>Name</th>
		  <th>Role</th>
		  <th>Available</th>
	        </tr>
	  </thead>
	  <tbody>
	  </tbody>
	</table>
     </div>		
     </div>