如何保留HTML表格样式& on:DataTables Ajax重新加载后点击属性?

时间:2018-04-26 11:31:07

标签: javascript thymeleaf

我有一个通过Thymeleaf创建的表格,其中包含set class& th:onclick财产。

在将新条目添加到数据库后,我正在进行表数据重新加载。重新加载是通过Ajax读取json文件并通过table.ajax.reload应用更改来完成的。

重新加载后,我似乎失去了所有样式和onclick属性,因为它不会触发。

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

执行重新加载的函数:

var table;

$(document).ready(function() {
table = $('#main-table').DataTable({
            ajax: {
                url: '/refresh',
                //type: 'json',
                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": "repDate.year",
                               },
                               {
                                   "className": "text-center",
                                   "targets": 2,
                                   "data": "hashrate",
                               }
                           ],
           "aoColumns": [
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "asc", "desc" ] },
             { "orderSequence": [ "desc", "asc" ] }
           ],
           "order": [[ 0, "asc" ]]


});
});

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

0 个答案:

没有答案