Question

我有一个脚本初始化DataTables并每隔几秒重新加载一次内容。

我想添加onclick事件处理程序，但不确定如何构造文件。现在的方式是，openPoolModal功能在页面刷新时触发，不会发生任何点击。这会导致DataTables初始化失败，因为打开模式对话框并且不存在任何表。

在onclick初始化后移动DataTables行时，getElementById只返回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);

我也尝试过点击实现，但结果相同：

$('#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>

Answer 1

我现在尝试通过event-delegation

回答

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

将此代码与您拥有的其他代码分开。

Answer 2

在这种情况下，您应该使用类名而不是id，因为在一个页面中只应存在一个ID。

# DXBC chunk  0: RDEF offset 52 size 972
# DXBC chunk  1: ISGN offset 1032 size 80
# DXBC chunk  2: OSGN offset 1120 size 44
# DXBC chunk  3: SHEX offset 1172 size 1592
# DXBC chunk  4: STAT offset 2772 size 148
ps_5_0
dcl_global_flags refactoringAllowed
dcl_constant_buffer cb0[30].xyzw, immediateIndexed
dcl_sampler sampler[0]
dcl_resource_texture2d resource[0]
dcl_resource_texture2d resource[1]
dcl_resource_texture2d resource[2]
dcl_input_ps linear v1.xy
dcl_output o0.xyzw
dcl_temps 5
ne r0.x, l(0, 0, 0, 0), cb0[29].y
mov r1.x, v1.x
add r2.xz, -v1.yyxy, l(1, 0, 1, 0)
eq r0.yzw, cb0[29].yyxz, l(0, 1, 1, 1)
movc r1.y, r0.y, r2.x, v1.y
add r2.y, -r1.y, l(1)
movc r0.xy, r0.xxxx, r2.yzyy, r1.xyxx
sample r1.xyzw, r0.xyxx, resource[1].xyzw, sampler[0]
sample r2.xyzw, r0.xyxx, resource[2].xyzw, sampler[0]
mad r0.xy, r1.zxzz, l(255, 255, 0, 0), r1.wyww
mad r0.xy, r0.xyxx, l(0.0078125, 0.0078125, 0, 0), l(-1, -1, 0, 0)
mul r0.y, r0.y, cb0[28].z
mad r1.x, -r0.x, cb0[28].y, l(1)
add r0.x, r0.x, cb0[28].y
div r0.xy, r0.xyxx, r1.xxxx
ge r1.x, l(1), r0.y
ge r1.y, r0.y, l(-1)
div r0.y, r0.y, cb0[28].x
and r1.x, r1.y, r1.x
ge r1.y, l(1), r0.x
and r1.x, r1.y, r1.x
ge r1.y, r0.x, l(-1)
div r0.x, r0.x, cb0[28].x
add r0.xy, r0.xyxx, l(1, 1, 0, 0)
and r1.x, r1.y, r1.x
and r1.x, r1.x, l(1065353216)
mul r1.y, r0.x, l(0.5)
mad r0.x, -r0.x, l(0.5), l(1)
movc r0.x, r0.z, r1.y, r0.x
add r0.z, -r0.x, l(1)
movc r3.y, r0.w, r0.z, r0.x
mul r3.x, r0.y, l(0.5)
add r3.x, r3.x, l(0.5)
sample r4.xyzw, r3.xyxx, resource[0].xyzw, sampler[0]
mul r1.xyzw, r1.xxxx, r4.xyzw
mul r1.xyzw, r2.xyzw, r1.xyzw
ge r0.x, l(2), r0.y
ge r0.y, r0.y, l(0)
and r0.x, r0.y, r0.x
ge r0.y, r3.y, l(0)
ge r0.z, l(1), r3.y
and r0.x, r0.y, r0.x
and r0.x, r0.z, r0.x
and r0.x, r0.x, l(1065353216)
mul o0.xyzw, r0.xxxx, r1.xyzw
ret

希望这个答案对你有帮助。让我知道发生了什么

如何使用DataTables处理onclick事件？

2 个答案: