CODEWITHSUNDEEP
javascriptjquerydatatable
user6224891
user6224891

Reputation:

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

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

});

Upvotes: 8

Views: 16994

Answers (5)

Aman Kejriwal
Aman Kejriwal

Reputation: 549

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

Upvotes: 0

jjoiner
jjoiner

Reputation: 44

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

Upvotes: 0

Ahmad
Ahmad

Reputation: 1474

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

Upvotes: 5

epascarello
epascarello

Reputation: 207511

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.

Upvotes: 2

koninos
koninos

Reputation: 5337

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.

Upvotes: 0

Related Questions