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>

Uncaught TypeError: Cannot read property 'innerText' of null. Same, the returned getElement is Null.. — Maciaz
– Maciaz, Commented Apr 27, 2018 at 8:51
table.on('click', 'tr', function () { var id = $(this).find("td#hashrateId").text(); console.log(id); openPoolModal(document.getElementById("hashrateId").innerText); } ); — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Apr 27, 2018 at 8:53
Doesn't work. I guess the problem is that my ajax.reload function just clears all the html tags, ids etc. So that's why getElementBy & find doesn't work. Any more clues? — Maciaz
– Maciaz, Commented Apr 27, 2018 at 9:20

Death-is-the-real-truth · Accepted Answer · 2023-08-09 05:00:22Z

2

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.

edited Aug 9, 2023 at 5:00

answered Apr 27, 2018 at 9:48

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

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

Collectives™ on Stack Overflow

How to handle onclick event with DataTables?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related