How to prevent row click function on specific column in datatable?

Question

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 () {

});

Answer 1

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                         
    });

Answer 2

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.

Answer 3

使用类或其他东西来标识您不想被单击的行/列，并检查单击事件是否来自此元素并使用event.preventDefault()取消操作。

Answer 4

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');
});

Answer 5

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
});