Cancel selection if button pressed in a column

Wooly65

I have a table where the select extension allows for a single select so I can show details in a second table. One of the columns has a button to download an analysis report. If I press the download button I would not like the row to be selected.

I tried to add the example code to cancel the select. If I click the area next to the button the select is cancelled and the row is not selected, but if I select the button the index returned the event callback is 0, not 1, and the row is selected.

Test case: https://live.datatables.net/detuwore/2/edit?html,js,console,output

kthorngren

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

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

Would you consider changing the example to use $(originalEvent.currentTarget) instead of $(originalEvent.target)?

allan

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

Allan

Wooly65

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

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

@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

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