How to handle onclick event with DataTables?

Question

I have a script that initializes DataTables and reloads content every few seconds.

I would like to add onclick event handler, but not sure how to structure the file. The way it is now, the openPoolModal function is triggered on page refresh without any click occuring. That leads to failed DataTables initialization as a modal dialog is opened and no tables are present.

When I move the onclick line after the DataTables initialization the getElementById just returns null.

   var table;

$(document).ready(function() {

$('#main-table').on("click", "tr", openPoolModal(document.getElementById("hashrateId").innerText));

table = $('#main-table').DataTable({
            ajax: {
                url: '/refresh',
                dataSrc:''
            },
           paging: true,
           lengthChange: false,
           pageLength: 20,
           stateSave: true,
           info: true,
           searching: false,
           "columnDefs": [
                 {
                 "className": "text-center",
                 "targets": 0,
                 "data": "id",
                 },

                 {
                 "className": "text-center",
                 "targets": 1,
                 "data" : function(data){

                     var seconds = data.repDate.second < 10 ? seconds = "0" + data.repDate.second : seconds = data.repDate.second;
                     var minutes = data.repDate.minute < 10 ? minutes = "0" + data.repDate.minute : minutes = data.repDate.minute;
                     var months = data.repDate.monthValue < 10 ? months = "0" + data.repDate.monthValue : months = data.repDate.monthValue;
                     var days = data.repDate.dayOfMonth < 10 ? days = "0" + data.repDate.dayOfMonth : days = data.repDate.dayOfMonth;

                     return data.repDate.year + "-" + months + "-" + days + "   " + data.repDate.hour + ":" + minutes + ":" + seconds;
                    },
                 },

                 {
                 "className": "text-center",
                 "targets": 2,
                 "data": function(data){
                    return data.hashrate/1000.0;
                    },
                 }
           ],
           "aoColumns": [
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "desc", "asc" ] }
           ],
           "order": [[ 0, "asc" ]]
});
});

setInterval(function(){
table.ajax.reload(null, false);
}, 8000);

I have also tried such on click implementation, but with same result:

$('#main-table').on('click', 'tr', function () {

    var id = document.getElementById("hashrateId").innerText;
    console.log(id);

    openPoolModal(document.getElementById("hashrateId").innerText);
} );

Html table:

<table class="table table-hover" id="main-table">

                        <thead class="thead-inverse">
                        <tr >
                            <th class="col-md-2 text-center">Network Id</th>
                            <th class="col-md-2 text-center">Rep date</th>
                            <th class="col-md-2 text-center">Hashrate [KH/s]</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr id="tableRow" style="cursor: pointer;" th:each="networkHashrate : ${networkHashrates}" th:onclick="'javascript:openPoolModal(\''+ ${networkHashrate.id} + '\');'">
                            <td class="text-center" id="hashrateId" th:text="${networkHashrate.id}"> Sample id</td>
                            <td class="text-center" id="repDate" th:text="${@findAndDisplayDataService.formatDate(networkHashrate.repDate)}">Sample rep-date</td>
                            <td class="text-center" id="hashrate" th:text="${@findAndDisplayDataService.formatHashrate(networkHashrate.hashrate)}">Sample hashrate</td>
                        </tr>
                        </tbody>
                    </table>

Answer 1

I will now try to answer through event-delegation

$(document).on('click', '#main-table tbody tr', function () { 
  var hashrateId = $(this).find("td").eq(0).text(); 
  console.log(hashrateId); 
  //openPoolModal(hashrateId); 
});

Put this code separately from the other code you have.