TableTools: Prevent Row Click Behaviour (Should Not Select Row)

EnterpriseDev

Dear All:

I have initialized my table with TableTools. Everything works fine. Great and easy to use plug-in!

One of the requirements for my tables is to have a column which displays an image (in each row). If the image is clicked, the row should NOTbe selected (something else happens, which is not relevant for the purpose of this comment).

I was not able to prevent the plug-in to apply the ".selected" class to the row. Also, I was not able to find the event handler for the row click in the code.

I came up with a poor workaround, which I am copying below:

'''
$(document).on({

click:function (event)
{
//this does not actually prevents the plug-in from applying the .selected class to the row.
event.stopPropagation();

//deselect all selected rows in the table.
var oTT = TableTools.fnGetInstance('myTableExampleID');
oTT.fnSelectNone();
}
}, ".myImageInTheTable");
'''

Is there a better a way to prevent the default behavior of TableTools? Why is stopPropagation() not working?

Thank you in advance for any answer!

allan

Hi, stopPropagation will be working, but as your click event handler is at the top of the event bubbling tree, the TableTools click select will already have happened!

What you could do is make your img click event handler occur before the TableTools one:

$('#myTable tbody').on( 'click', 'img', function (e) {
  e.stopPropagation();
} );

I think that should do it.

Allan