Adding click events to Datatables

Question

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

Should it not be tr[role='row']?

Sandeep Nayak
– Sandeep Nayak

2016-05-19 07:39:14 +00:00
Commented May 19, 2016 at 7:39 — Sandeep Nayak
– Sandeep Nayak, Commented May 19, 2016 at 7:39

Usman Shaukat · Accepted Answer · 2021-12-16 18:26:21Z

10

It should be like this:

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

Brief Explanation:

On initial page load(that is when document.ready callback function is executed), the Datatable elements (rows and columns etc) are not yet present in the DOM Tree. They are created at runtime in response to data changes. Therefor the callback function provided in document.click method will not get bind to any element (i.e. div[role='row']).
To overcome it, .on method is available. It binds the callback function to click event of elements already in the DOM and also to elements that are created dynamically.

edited Dec 16, 2021 at 18:26

Usman Shaukat

1,33116 silver badges23 bronze badges

answered May 19, 2016 at 7:41

Naqash Malik

1,8261 gold badge13 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dreamweiver Over a year ago

add more description to your answer

Naqash Malik Over a year ago

description has been added.

cralfaro · Accepted Answer · 2016-05-19 08:38:11Z

If you are loading your Table by ajax, maybe would be better use the function "initComplete" of dataTable, then you could bind events to any element in the table when you are totally sure of all rows are present.

$('#example').DataTable({
    "ajax": "myOrders/" + Cookies.get('userSession'),
    "initComplete": function () {
            $( document ).on("click", "tr[role='row']", function(){
                 alert($(this).children('td:first-child').text())
            });
        }
});

Sandeep Nayak · Accepted Answer · 2016-05-19 07:41:54Z

Change your click to this:

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

Sample:

$(document).ready(function() {


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Jagdish Idhate · Accepted Answer · 2016-05-19 07:44:11Z

1

.click event will not bind on dynamic elements, In your case rows will be loaded after ajax call.

So change code to below

$("tr[role='row']" ).on('click', function(){
  alert('clicked')
});

answered May 19, 2016 at 7:44

Jagdish Idhate

7,7529 gold badges37 silver badges58 bronze badges

Comments

SURJIT KUMAR · Accepted Answer · 2018-06-30 08:38:11Z

0

Try it:

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

answered Jun 30, 2018 at 8:38

SURJIT KUMAR

1041 silver badge6 bronze badges

Collectives™ on Stack Overflow

Adding click events to Datatables

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Linked

Related