Problem with 2 or more tables and multi filter

rktmedia

Hi, I have a problem when I try to work with 2 or more tables on the same page with multi filter enabled.

This is the full script code

[code]


$(document).ready(function()
{
/*
* Example context menu
*/

// Context menu for all favorites
$('.favorites li').bind('contextMenu', function(event, list)
{
var li = $(this);

// Add links to the menu
if (li.prev().length > 0)
{
list.push({ text: 'Move up', link:'#', icon:'up' });
}
if (li.next().length > 0)
{
list.push({ text: 'Move down', link:'#', icon:'down' });
}
list.push(false); // Separator
list.push({ text: 'Delete', link:'#', icon:'delete' });
list.push({ text: 'Edit', link:'#', icon:'edit' });
});

// Extra options for the first one
$('.favorites li:first').bind('contextMenu', function(event, list)
{
list.push(false); // Separator
list.push({ text: 'Settings', icon:'terminal', link:'#', subs:[
{ text: 'General settings', link: '#', icon: 'blog' },
{ text: 'System settings', link: '#', icon: 'server' },
{ text: 'Website settings', link: '#', icon: 'network' }
] });
});



/*
* Table sorting
*/

// A small classes setup...
$.fn.dataTableExt.oStdClasses.sWrapper = 'no-margin last-child';
$.fn.dataTableExt.oStdClasses.sInfo = 'message no-margin';
$.fn.dataTableExt.oStdClasses.sLength = 'float-left';
$.fn.dataTableExt.oStdClasses.sFilter = 'float-right';
$.fn.dataTableExt.oStdClasses.sPaging = 'sub-hover paging_';
$.fn.dataTableExt.oStdClasses.sPagePrevEnabled = 'control-prev';
$.fn.dataTableExt.oStdClasses.sPagePrevDisabled = 'control-prev disabled';
$.fn.dataTableExt.oStdClasses.sPageNextEnabled = 'control-next';
$.fn.dataTableExt.oStdClasses.sPageNextDisabled = 'control-next disabled';
$.fn.dataTableExt.oStdClasses.sPageFirst = 'control-first';
$.fn.dataTableExt.oStdClasses.sPagePrevious = 'control-prev';
$.fn.dataTableExt.oStdClasses.sPageNext = 'control-next';
$.fn.dataTableExt.oStdClasses.sPageLast = 'control-last';

// Apply to table

$('.sortable').each(function(i)
{
// DataTable config
var table = $(this),
oTable = table.dataTable({
/*
* We set specific options for each columns here. Some columns contain raw data to enable correct sorting, so we convert it for display
* @url http://www.datatables.net/usage/columns
*/


/*
* Set DOM structure for table controls
* @url http://www.datatables.net/examples/basic_init/dom.html
*/
sDom: '<"block-controls"<"controls-buttons"p>>rti<"block-footer clearfix"lf>',

/*
* Callback to apply template setup
*/
fnDrawCallback: function()
{
this.parent().applyTemplateSetup();
},
fnInitComplete: function()
{
this.parent().applyTemplateSetup();
}
});

// Sorting arrows behaviour
table.find('thead .sort-up').click(function(event)
{
// Stop link behaviour
event.preventDefault();

// Find column index
var column = $(this).closest('th'),
columnIndex = column.parent().children().index(column.get(0));

// Send command
oTable.fnSort([[columnIndex, 'asc']]);

// Prevent bubbling
return false;
});
table.find('thead .sort-down').click(function(event)
{
// Stop link behaviour
event.preventDefault();

// Find column index
var column = $(this).closest('th'),
columnIndex = column.parent().children().index(column.get(0));

// Send command
oTable.fnSort([[columnIndex, 'desc']]);

// Prevent bubbling
return false;
});

var asInitVals = new Array();

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );



/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

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

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

});

[/code]
If I only use one table it works great, in fact it still works with 2 or more tables but only works the first table filters and when I enter something it filters all tables on the page.

If I remove the tfoot input options to disable the filter option in all tables, all works great and individually per table, but I need to have more than 2 tables on the same page and I cant find the way to make it work....

I tried to find info here but I cant make it work. If someone can help me I will be thankful.
Thanks

Damian