Loading two tables in a single jsp page

Vadivel

Hi ,
i have the following issue,
i just load 2 data tables in single jsp page , in that column filter is not working in first table,
my code sample:
First table code:
oTable = $('#mytable1').dataTable

( {

"bFilter":true,
"sDom": 'rt<"bottom"lip><"clear">',
"bProcessing": true,
"bDestroy": true,
"sAjaxSource":"/FinanceData/candidate.html",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "resultsql", "value":resultsql} );
aoData.push( { "name": "dept", "value":dept} );

},

"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aoColumnDefs": [
{ "bSearchable": true, "bVisible": false, "aTargets": [6] }
],

"oLanguage":
{
"sSearch": "Search all columns:"
},
"bAutoWidth": false,
"aoColumns" : [
{ sWidth:"10%", "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%' , "sClass":"gridwrap"},


]
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );

$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );

Second table code:
oTable = $('#mytable2').dataTable
( {

"bFilter":true,
"sDom": 'rt<"bottom"lip><"clear">',
"bProcessing": true,

"bDestroy": true,
"sAjaxSource":"/FinanceData/candiAjax.html",
"sPaginationType": "full_numbers",
"bJQueryUI": true,

"fnServerParams": function ( aoData ) {
aoData.push( { "name": "ID", "value":ID} );
},


"oLanguage":
{
"sSearch": "Search all columns:"
},
"bAutoWidth": false,
"aoColumns" : [
{ sWidth:"10%", "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%' , "sClass":"gridwrap"},
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%', "sClass":"gridwrap" },
{ sWidth: '10%' , "sClass":"gridwrap"},
{ sWidth: '10%', "sClass":"gridwrap" }

]
} );

$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );

$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );

oTable.fnDraw();
oTable.fnDraw();