Answers

• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  June 11 edited June 11 Answer ✓

  It looks like the originalEvent.target is input#n-"24".name when clicking the button. The originalEvent.currentTarget is the td. Checking the originalEvent.currentTarget seems to work:
  https://live.datatables.net/detuwore/3/edit

  However it might be easier to use the select.selector to ignore the columns you don't want used for row selection.
  https://live.datatables.net/qeqabesu/1/edit

  It might be easier to view this with the browser's console rather than the JS Bin console tab.

  Kevin
• Wooly65 Posts: 86Questions: 25Answers: 1

  June 11

  Thanks, I like the select.selector in this situation.

  Would you consider changing the example to use $(originalEvent.currentTarget) instead of $(originalEvent.target)?
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 11

  That would introduce backwards compatibility issues I'm afraid. Kevin's first link is how I would suggest resolving this just now.

  Allan
• Wooly65 Posts: 86Questions: 25Answers: 1

  June 11

  Just to confirm, based on your comment you like Kevin's first link

  table.on('user-select', function (e, dt, type, cell, originalEvent) {
    if ($(originalEvent.currentTarget).index() === 1 || $(originalEvent.currentTarget).index() === 2) {
          e.preventDefault();
      }
  });
  

  instead of

          select: {
              style: 'single',
              selector: 'td:not(:nth-child(2),:nth-child(3))'
          },
  
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 11 Answer ✓

  Yes - the user-select option. I can't think of a selector that would work to exclude the download button specifically, but allow td's with no child nodes themselves. user-select was added for exactly that sort of thing, if not particularly elegant.

  Allan
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  June 11 edited June 11

  @allan My second test case seems to work with selector: 'td:not(:nth-child(2),:nth-child(3))' and the button in the second column.
  https://live.datatables.net/qeqabesu/1/edit

  The user-select event doesn't fire if the Position or Office td are clicked including the button in the Position column. Sounds like, with the selector: 'td:not(:nth-child(2),:nth-child(3))' setting, that you expect the row to be selected if the button in :nth-child(2) is clicked.

  Kevin
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 12

  user-select won't trigger if the selector doesn't match the clicked element. So yes, if you exclude :nth-child(2) clicking on it won't do anything.

  On thinking about it a bit more, I think I've got a better solution - use the click event listener on the button to stop the bubbling of the event up the DOM. Select uses a listener on the table, so if we stop it bubbling before it gets there, it won't see it. That is easily done with return false; in a jQuery event handler:

  https://live.datatables.net/qeqabesu/2/edit

  Allan