Multi-Column Filtering and Hidden Rows Not Working As Expected

victoro

I have a table that uses multi-column filtering (in the header) and hidden rows. The problem is that the search input box over a specific column searches the column to it's left and not the column directly under it. I assume it's because the first column contains a plus/minus image. How do I specify multi-column filtering when I have hidden rows. Also, I'm using the columnFilter extra.

[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += ''+aData[7]+'';
sOut += ''+aData[8]+'';
sOut += ''+aData[9]+'';
sOut += ''+aData[10]+'';
sOut += ''+aData[11]+'';
sOut += ''+aData[12]+'';
sOut += '';
return sOut;
}

$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var asInitVals = new Array();
var oTable = $('#example').dataTable( {
"sDom": 'C<"clear">lfrtip',
"oLanguage": {"sSearch":"Search all columns:"},
"bSortClasses":false,
"bSortCellsTop":true,
"aoColumnDefs":[
{"bSortable":false,"aTargets": [ 0,7,8,9,10,11,12 ] },
{"bVisible":false,"aTargets": [ 7,8,9,10,11,12 ] }
],
"aaSorting":[[1,'asc']]
})
.columnFilter( {
sPlaceHolder: "thead:after",
aoColumns: [ null,null ] });


/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#example tbody td img').live('click',function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "plus.gif";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "minus.gif";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
$("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)];
}
} );

} );
[/code]