Sulthan A Sulthan A - 6 months ago 13
jQuery Question

Adding click events to Datatables

Here is my Jquery data tables to get the values from ajax and placing it.

$(document).ready(function() {
$('#example').DataTable({
"ajax": "data/arrays.txt"
});
});


Here is the constructed table.

I want to write click function to it. How can i do it ?

<table id="example" class="table dataTable no-footer" role="grid" aria-describedby="example_info" style="width: 299px;">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">TMB030</td>
<td>Sample Collected</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">TMB033</td>
<td>Sample Collected</td>
</tr>
</tbody>
</table>


I want to write click event to the role="row" and get the value
TMB030
on it.

How can i do that ?

I tried like this

$(document).ready(function() {
$('#example').DataTable({
"ajax": "myOrders/" + Cookies.get('userSession')
});
$("div[role='row']").click(function() {
alert('clicked')
});
});


But it is not triggered how can i do that ? Help pls

Answer

It should be like this:

$( document ).on("click", "tr[role='row']", function(){
    alert($(this).children('td:first-child').text())
});