CODEWITHSUNDEEP
jquerydatatables
kackleyjm
kackleyjm

Reputation: 595

Make Datatables row clickable

I have a table which is loaded with data via ajax using datatables.net. I'd like to make it so that when the user clicks on a row it links to a URL appended with the get variable of that row's primary key.

I'm rather new to Datatables so my hacked attempt/idea was to use Datatables to apply two classes two the column with my primary key. The two classes were hide (css of display:none) and projectID (identifying that column so I can grab it's value with jquery). I was able to apply those classes using the aoColumns property and it did hide the column and append the projectID class as well. However I think since Datatables is creating the table it's preventing me from using 

$('#project-table tr').click(function(){alert('clicked');}

so I tried

$('#project-table tr').live('click',function(){alert('clicked');})};

Also to no avail.

I would imagine there is a better way than I'm using to make a row clickable, linking to a page with appended primary key get variable, but I couldn't find an example. If anyone has a link to an example or could point me in the right direction it'd be appreciated.

Upvotes: 1

Views: 4795

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50777

I have a table which is loaded with data via ajax using datatables.net

That means that any event handlers bound to the elements during page load will not be applicable to the loaded data unless the event is delegated to a static parent element -- meaning that the element is never removed or replaced, and will exist indefinitely.

$(document).on('click', '#project-table tr', function(){
    alert('This is a click on a dynamic element');
});

Here, we've bound the click event to the document. You can choose an element that is closer (for performance increases) if you so choose.

Here is the link to the documentation for .on()

As a side note -- in jQuery 1.9 +, a few functions have been removed. One of them is the .live() function, which has been replaced with the .on() method (as displayed above). This is why it didn't work. Also, the console will tell you this. Many current browsers come with their own web inspector, otherwise you can do a google search for your browser and find an alternative.

Upvotes: 5

Related Questions