Add class to custom TableTools button from fnRowSelected function within DT initialization

carlg

Hi,

The title of my post is pretty self-explanatory, so let me post some code here:

[code]
var oTable = $('#userTable').dataTable({
"sDom": "<'row-fluid'<'span5'T><'span3'l><'span4'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"bServerSide": "true",
"sAjaxSource": "arch/users/Utils.cfc?method=getRecordsForGrid",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"sInfoFiltered": "(_MAX_ total)"
},
"aoColumnDefs": [



{ "aDataSort": [ 2, 0, 1 ], "aTargets": [ 2 ] },
{ "mData": "name", "aTargets": [ #ii# ] },
{ "mData": "user_name", "aTargets": [ #ii# ] },
{ "mData": "group.name", "aTargets": [ #ii# ] },
{ "mData": "user_type.name", "aTargets": [ #ii# ] },
{ "mData": "email", "aTargets": [ #ii# ] },
{ "mData": "user_type", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "status_cde.name", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "addr1", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "addr2", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "city", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "state", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "zip", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "country", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "phone", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "fax", "aTargets": [ #ii# ], "bVisible": false },
{ "mData": "hint", "aTargets": [ #ii# ], "bVisible": false }

],
"oTableTools": {
"sRowSelect": "single",
"sSelectedClass": "row_selected",
"fnRowSelected": function ( node ) {
user_type = oTable.fnGetData(node[0]).user_type.value;
user_id = oTable.fnGetData(node[0]).DT_RowId;
if ((user_type.trim() === 'A') || (user_type.trim() === 'B')) {
$('#ToolTables_userTable_3').addClass('disabled');
}
},
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
});
$('#userTable_filter input').addClass('search-query');

var oTableTools = new TableTools(oTable, {
"aButtons": [
{
"sExtends": "select_single",
"sButtonText": "  Manage Access",
"fnClick": function ( node ) {
if ($(node).hasClass('disabled')) {
return false;
} else {
showSubAccessPanel(user_id);
}
}
}]
});
$('#userTableDiv .span5').first().append(oTableTools.dom.container);
[/code]

Basically, I think I'm just having a scope issue. The

if ((user_type.trim() === 'A') || (user_type.trim() === 'B')) {}

check runs correctly, but the button I'm trying to affect isn't getting updated. Is there a different way I could go about trying to affect this button from within fnRowSelected? The ID I'm using to target it is just the dynamically generated ID and I would think it should be available.

I've tried adding an fnRowSelected function doing the same thing in the custom TableTools button initialization but that doesn't work. I think it's because fnGetData isn't working; not sure.

Thanks,
Carl

allan

Hi Carl,

I would say that it likely is a scoping issue, since you are defining user_id outside of the scope where you are using it, however, I think it can be simplified to remove this issue.

Firstly I would say, you don't need your fnRowSelected function - the `select_single` button will add the `DTTT_disabled` class to the button as needed (you'd need to remove your `disabled` class as well - so let TableTools handle that logic).

Instead, I'd suggest you use the API method fnGetSelectedData in the fnClick - http://datatables.net/extras/tabletools/api#fnGetSelectedData . Something like:

[code]
var d = this.fnGetSelectedData();
if ( d.length === 1 ) {
showSubAccessPanel( d[0].DT_RowId );
}
[/code]

Regards,
Allan

carlg

Hey Allan,

I think I may need to clarify more. I'm currently passing the user ID to my function successfully. What I'm trying to do is, each row has a user type, which I stored in

user_type = oTable.fnGetData(node[0]).user_type.value;

Based on what the user_type is, I may still want to keep the extra TableTools button disabled, as it only applies to 2 of the 4 different user types. So right now the button is always active when there is a row selected. I would like to have it stay disabled if the selected row's user_type is A or B, but active if the value is D or F. I hope that makes sense.

Thanks for the help,
Carl

allan

Hi Carl,

Thanks for the clarification. What I think you need to do then, is override the fnSelect option of the button. This is the default code:

[code]
"fnSelect": function( nButton, oConfig ) {
var iSelected = this.fnGetSelected().length;
if ( iSelected == 1 ) {
$(nButton).removeClass( this.classes.buttons.disabled );
} else {
$(nButton).addClass( this.classes.buttons.disabled );
}
},
[/code]

So you might modify it to something like:

[code]
"fnSelect": function( nButton, oConfig ) {
var d = this.fnGetSelectedData();
if ( d.length == 1 && (d[0].user_type.value !== 'A' || d[0].user_type.value !== 'B' ) ) {
$(nButton).removeClass( this.classes.buttons.disabled );
} else {
$(nButton).addClass( this.classes.buttons.disabled );
}
},
[/code]

Allan

carlg

Perfect as usual. Thanks Allan.