I am dealing with a javascript datatable with clickable rows. Each row have onclick function, but in my one column i have different links that open jquery dialogues box, on this column i want to disable row click method, how to do this ? here is function that i implement of row click
$(rec' tbody').on( 'click', 'tr', function () {
});
you have to disable row click for that particular column
$('rec' tbody'').on('click', 'td', function () {
if ($(this).index() == 4 ) { // provide index of your column in which you prevent row click here is column of 4 index
return;
}
// you can do additional functionality by clicking on this column here
});
You can either check to see if what was clicked was an anchor
$(rec' tbody').on( 'click', 'tr', function (evt) {
if ( $(evt.target).is("a") ) {
return;
}
/* do whatever here */
});
or other option is to stop the propagation of the event from the link/cell.
Use a class or something to identify the row/column that you don't want to be clicked and check if the click event comes from this element and use event.preventDefault()
to cancel action.
You could try setting the class for each column that you want to be clickable to something specific and the non-clickable to something else.
<table>
<tr>
<td class="clickable">click this</td>
<td class="clickable">and this</td>
<td class="something-else">but not this</td>
</tr>
</table>
And then have your jQuery just do something on the class rather than the <tr>
$(".clickable").click(function(){
alert('hello');
});
The accepted answer works but there may be people looking to interact with the row and not the column clicked. For those cases try this:
table.on("click", 'tbody tr td', function() {
if ($(this).index() == 10) return false;
var $row = $(this).parent() // this is the row you wanted
var theRow = table.row($row);
//var artcode = theRow.data()[4];
// Further logic goes here
});
