Multi-select Row, but Not Hyperlink

jimbillig

Hi All,

I'm following the multi-select row example on the site and it's working fine, except that I've got columns that have hyperlinks in them (for edit, view, delete, etc). In those cases when I click the link, the row highlights for a moment, then my page loads.

Is there a way to not select/deselect the row if a hyperlink is clicked? I considered making columns that have links not clickable, but some columns have a lot of blank space and it's odd that you can't click in those cells (just not on the text). Is my only option to switch to checkboxes?

Thanks in advance!

robertbrower

I would use checkboxes. Here's a link with more info: http://datatables.net/forums/discussion/10997/how-to-check-checkboxes-on-filtered-rows#Item_4

To answer your question though, use this:

event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;

...in the event handler for the checkbox or hyperlink as it were.

jimbillig

robertbrower- Thanks for commenting. Why would you use checkboxes? I do prefer highlighting the rows, but I'm curious why you suggest the checkboxes.

With regards to the stopPropagation, I don't currently have any event handler for the hyperlinks. Would I do something like-

[code]
$('#mytable tr td a').click(function(){
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
});
[/code]

This table is built from an ajax call, so I would assume I'd have to use .live(), except that reading the jQuery event.stopPropagation() doc says that it would fire after it had already been propagated.

robertbrower

I like checkboxes because a highlighted row is not always as intuitive, meaning, the user does not always know that highlighted means selected. But that is just my own opinion. Also, sometimes CSS highlighting can get confusing if the mouse is moved too quickly.

You almost have it. You need to pass the event to the handler as in this:
Fiddle: http://jsfiddle.net/atomofthought/h9U4M/
Full Screen: http://jsfiddle.net/atomofthought/h9U4M/embedded/result/

Regards,

Robert

jimbillig

robertbrower- Thanks! Worked perfectly. I'm going to stick with the highlight since I've already got it mostly implemented, but thanks for the input!

jimbillig

Looks like I spoke too soon. I hadn't yet implemented my server side ajax data. Once implemented, the .click handler stopped firing. I should also mention that I'm using fnRender() to turn the value into cell contents into a clickable link.

robertbrower

That sounds fine, but you should bind events to html elements such as hyperlinks in the data table from within the datatable's fnDrawCallback function because Datatables renders the markup for the visible rows only and removes the elements when you go to the next page for example. I think this might be the problem. Check out what the dcs say about fnDrawCallback. Place the code above which adds the click handler to the hyperlink inside this callback.