Row toggling by changing class names

andrewcroce

I am attempting to do (what I thought would be) a simple row-toggling scenario. I have a table with sets of rows, grouped by class names. ie:
[code]

...
...
...
...
...
...
...
...
...

[/code]
In this example, all the .e1 rows are a group, all the .e2, etc. What I am trying to achieve is a scenario where an element somewhere inside each .eN.element-row toggles the expanded/collapsed classname for all .eN.component-row elements. I have done this with some relatively basic jQuery and it works fine:

[code]

$(".comparison-chart table th.element").live("click",function(e){

//Bla bla, all this works fine toggling the classes that need to be toggled

var tr = $(this).closest("tr");
var elem_id = tr.data('element-id');
tr.toggleClass('expanded collapsed');
tr.siblings('.'+elem_id).toggleClass('expanded collapsed');
$("#comparison-table.dataTable tr."+elem_id).not(":first").toggleClass('expanded collapsed');

// Not tied into dataTables yet...

[/code]

The problem arises when I attempt to tie this into a custom dataTables filter using the method I have found in several examples:
http://datatables.net/release-datatables/examples/plug-ins/range_filtering.html
http://stackoverflow.com/questions/17508947/datatables-custom-filtering-by-class-name-of-tr

[code]

$.fn.dataTableExt.afnFiltering.push(function( oSettings, aData, iDataIndex ){
var row = oSettings.aoData[iDataIndex].nTr;
if( $(row).hasClass('collapsed component-row') ) {
return false;
} else {
return true;
}
});

[/code]

Then back in the function that was bound to my click... where it says above "Not tied into dataTables yet"... I add:

[code]

comparison_table.fnDraw();
return false;

[/code]

Which redraws the table, applying the filters.

The filter itself is working on preliminary page load. The .collapsed.component-row elements are properly hidden like they should be. But on clicking the bound element, my class toggles no longer function, and it appears it is redrawing the table with the original data. I believe this is because the original data is cached, and thats were its getting the content of the table. Modifying the cached data seems like a really bad idea. Its hard to even tell what is happening, so I don't even know if this is the correct explanation.

So then, how can I set up a filter like this that merely toggles row visibility based on changing class names? Any assistance would be greatly be appreciated.

Andrew

andrewcroce

Well I guess nobody had anything to say about this. In any case I have figured out the solution incase someone else comes across a similar issue.

The issue was the elements I was selecting with jQuery were on the DOM, whereas I should have been selecting directly from the DataTables table object.

So this...
[code]
var tr = $(this).closest("tr");
var elem_id = tr.data('element-id');
tr.toggleClass('expanded collapsed');
tr.siblings('.'+elem_id).toggleClass('expanded collapsed');
[/code]

Should be this...
[code]
var tr = $(this).closest("tr");
var elem_id = tr.data('element-id');
// Instead of selecting from the DOM, select from myTable, which is the DataTables object originally created when I first called .dataTables();
myTable.$("tr."+elem_id).toggleClass('expanded collapsed');

[/code]