Как обработать событие onclick с помощью DataTables? - PullRequest
Новая
       19

Как обработать событие onclick с помощью DataTables?

0 голосов
/ 27 апреля 2018

У меня есть скрипт, который инициализирует DataTables и перезагружает контент каждые несколько секунд.

Я хотел бы добавить onclick обработчик событий, но не уверен, как структурировать файл. Как и сейчас, функция openPoolModal запускается при обновлении страницы без каких-либо щелчков. Это приводит к неудачной инициализации DataTables, так как открывается модальное диалоговое окно и отсутствуют таблицы.

Когда я перемещаю строку onclick после инициализации DataTables, getElementById просто возвращает ноль. 

   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);

Я также пробовал такую ​​реализацию по клику, но с тем же результатом: 

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

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

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

Таблица HTML: 

<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>

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Сейчас я попытаюсь ответить через делегирование события 

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

Поместите этот код отдельно от другого вашего кода.

0 голосов
/ 27 апреля 2018

В этом случае следует использовать имя класса вместо идентификатора, поскольку на одной странице должен существовать только один идентификатор. 

<script>
var table;
$(document).ready(function(){

    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" ]]
    });

    triggerHashrateIdClick();
})

function triggerHashrateIdClick()
{
    var table = $('#main-table').DataTable();

    table.on( 'draw.dt', function () {

        //Here I assume you will use a class name instead of id for :'hashrateId'
        //$("table#main-table").find("tr td#hashrateId").each(function(index, element) {
        $("table#main-table").find("tr td.hashrateId").each(function(index, element) {

            $(this).click(function(){

                var id = $(this).text();
                console.log(id);
                openPoolModal(id);
            })
        });
    });
}
</script>

Надеюсь, этот ответ поможет вам. Дайте мне знать, что случилось

...