Should fnFilter iterate over rows that have already been filtered out?

meghnasapre

Hi all,

I am trying to programmatically expand/collapse rows on a button click.

- My table can have multiple entries for an employee ID, and wherever that is the case, I have a parent row with a field called 'RowType' which is set to 'Aggregate'. in other case it's null.

- My default view on page load is expanded rows. Parent rows have a button which they can click to collapse. On click, the rows collapse and the image changes. They should now be able to click again and expand rows again.

- My filter to collapse the rows works fine. The filter to expand again does not. When I set the filter to match the Employee ID, it only returns the one row, which is the parent row (already visible).

Enough talk, let's see the code :)

in my document.ready I have
[code]

var oTable = $('#example').dataTable({
"bProcessing": true,
"fnCreatedRow": function( nRow, aData, iDisplayIndex){

var RowTypeIndex = oTable.fnGetColumnIndex("RowType"); //Berta Aggregate;
var eidIndex = oTable.fnGetColumnIndex("EmployeeID");

if ( aData.RowType == "Aggregate")
{
$('td:eq('+eidIndex+')', nRow).html( ' '+ aData.EmployeeID);
nRow.ClassName = "Expanded";
}
},
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"sPaginationType": "full_numbers",
"sAjaxSource": "GetData.aspx",
"sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
"aaSorting": [],

"aoColumns": [
{ "mData": "EmployeeID" , "sTitle": "EmployeeID", "sType": "html"},
{ "mData": "SmokeSM", "sTitle": "SmokeSM" },
{ "mData": "SmokeStatus", "sTitle": "SmokeStatus" },
var RowTypeIndex = oTable.fnGetColumnIndex("RowType"); //Berta Aggregate;
var eidIndex = oTable.fnGetColumnIndex("EmployeeID");
oTable.fnSort( [ [eidIndex,'desc'], [RowTypeIndex,'desc']] ); //enter column number we want the default ordering by, can enter more than one pair as ([ [3,'desc'], [5,'asc'] ])


$('#example').delegate('tbody td img', 'click', function () {
var RowTypeIndex = oTable.fnGetColumnIndex("RowType"); //Berta Aggregate;
var eidIndex = oTable.fnGetColumnIndex("EmployeeID");

var nTr = $(this).parents('tr')[0];
var aData = oTable.fnGetData( nTr );
if (nTr.ClassName == "Expanded")
{
/* This row is already open - close it */
fnCollapseRows(aData.EmployeeID, nTr.ClassName);
var jsDataStr = "javascript:fnCollapseRows("+aData.EmployeeID+","+nTr.ClassName+");";
$('td:eq('+eidIndex+')', nTr).html( ' '+ aData.EmployeeID);
nTr.ClassName = "Collapsed";

}
else if(nTr.ClassName == "Collapsed")
{
/* Open this row */


$('td:eq('+eidIndex+')', nTr).html( ' '+ aData.EmployeeID);
fnExpandRows(aData.EmployeeID, nTr.ClassName);
nTr.ClassName = "Expanded";
}
} );
[/code]

My Collapse function:

[code]
function fnCollapseRows(eID, className)
{

var eIDIndex = -1;
var table = $('#example').dataTable();
table.fnFilter('');
var eIDIndex = table.fnGetColumnIndex("EmployeeID");
var RowTypeIndex = table.fnGetColumnIndex("RowType"); //Aggregate
if(eIDIndex > -1)
{
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var rowType = aData[RowTypeIndex];
var nTr = oSettings.aoData[iDataIndex].nTr;

var str = aData[eIDIndex];

/*Regex to remove HTML tags*/
str=str.replace(/
/gi, "\n");
str=str.replace(//gi, "\n");
str=str.replace(/(.*?)<\/a>/gi, "\n");
str=str.replace(/<(?:.|\s)*?>/g, "");
str = str.replace(/(^\s+|\s+$)/g, '');

if(str == eID && rowType == "Aggregate" && className == "Expanded")
{
return true;
}
else if(str != eID)
{
return true;
}

return false;

}
);
}
var table = $('#example').dataTable();
{ table.fnDraw();}

}
[/code]

MY Expand function:
[code]
function fnExpandRows(eID, classname)
{
var table = $('#example').dataTable();
table.fnFilter('');
var eIDIndex = table.fnGetColumnIndex("EmployeeID");
var RowTypeIndex = table.fnGetColumnIndex("RowType"); //Aggregate

$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var rowType = aData[RowTypeIndex];
var nTr = oSettings.aoData[iDataIndex].nTr;
var str = aData[eIDIndex];
str=str.replace(/
/gi, "\n");
str=str.replace(//gi, "\n");
str=str.replace(/(.*?)<\/a>/gi, "\n");
str=str.replace(/<(?:.|\s)*?>/g, "");
str = str.replace(/(^\s+|\s+$)/g, '');
if(str == eID)
{alert("match");
return true;}
else
return true;
}
);

var table = $('#example').dataTable();
{ table.fnDraw();}

}
[/code]

Is something more/less I need to do?

Thank you for all your help!

-Meghna