row filter from TableTools button

dnagirl

I have a table that holds a daily calendar. I want to use a TableTools button to toggle the visibility (ie filtre) rows that have the class 'nonworkhour'. The text of the button should toggle from "Show Work Hours" to "Show All Hours" depending on whether the filter is active.

I've tried adding the following fnClick functions to my button to get the functionality that I want. None work.

[code]
'fnClick': function(nButton, oConfig, oFlash){

if(oConfig.sButtonText='Show Work Hours'){
oConfig.sButtonText="Show All Hours";
$("tr.nonworkhour").hide();
} else {
oConfig.sButtonText="Show Work Hours";
$("tr.nonworkhour").show();
};
oTable.fnDraw();
}
[/code]

[code]
function(nButton, oConfig, oFlash){
$(nButton).toggle(
function(oConfig){
oConfig.sButtonText="Show Work Hours";
$("tr.nonworkhour").show();
},
function(oConfig){
oConfig.sButtonText="Show All Hours";
$("tr.nonworkhour").hide();
}
);
oTable.fnDraw();
}
[/code]

and variations.



This is the table html:

[code]


Friday, June 15,
2012



Hour
General




All
Day
 


0:00

 


1:00

 


2:00

 


3:00

 


4:00

 


5:00

 


6:00

 


7:00

 


8:00

 


9:00

 


10:00

 


11:00

 


12:00

 


13:00

 


14:00

 


15:00

 


16:00

 


17:00

 


18:00

 


19:00

 


20:00

 


21:00

 


22:00

 


23:00

 



[/code]

allan

This is certainly possible, however, the way to do it is not to show an hide DOM elements, as that will break DataTables display - DataTables adds and removes elements from the DOM as needed by sorting, paging and filtering, rather than showing / hiding them.

What you need here is to use custom row based filtering ( http://datatables.net/development/filtering#row_filters ) and then have the TableTools button toggle a flag that will tell the filter if it should remove rows with the class or not (then just call fnDraw to have the filter applied) :-)

Allan

dnagirl

Thanks for the pointer. My main stumbling block was the requirement to set a flag. This is my solution:

Filter
[code]
$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex ) {
var filter= $('#workhourfilter').val();
var tr = $('tr', $('table.day tbody'))[iDataIndex];
if(!filter) {
return $(tr).hasClass('nonworkhour') ? false : true;
}
return true;
});
[/code]

TableTools button
[code]
{'sExtends': 'text',
'sButtonText': 'Show All Hours',
'sButtonClass': 'DTTT_button ui-button ui-state-default',
'sButtonClassHover': 'DTTT_button ui-button ui-state-default ui-state-hover',
'fnInit': function(nButton, oConfig) {
$(oTable).append(''); //holds filter flag
},
'fnClick': function(nButton, oConfig, nRow){
if(oConfig.sButtonText=='Show Work Hours'){
oConfig.sButtonText='Show All Hours';
$('#workhourfilter').val(true);
}else{
oConfig.sButtonText='Show Work Hours';
$('#workhourfilter').val(false);
}
$(nButton).text(oConfig.sButtonText);
oTable.fnDraw();
}
}[/code]

allan

Look good - nice one! And thanks for sharing your solution with us.

Regards,
Allan