jquery - 使用数据表动态加载数据的分页

问题描述

当页面加载并使用 dataTables 设置分页和搜索框时，我第一次从服务器端加载表中的数据。此后，我想<tbody>每 60 秒加载一次内部数据而不刷新页面。当页面第一次加载时，它正确应用了分页，当数据每 60 秒动态加载时，分页不变，所有行都显示在同一页面中。

我有一个复杂的表结构，每行都嵌套了一个表。这是我的<tbody>结构。

<tr class="d-flex">
   <td class="col-0">1</td>
   <td class="col-2">5/3/2021, 3:10:02 pm</td>
   <td class="col-2">C0001_001</td>
   <td class="col-8">
      <div class="table-responsive col-md-10" style="max-height:250px; overflow-y: scroll;">
         <table>
            <tr>
               <td>Rwt_lvlWtrTnk:3.07</td>
            </tr>
            <tr>
               <td>Rwt_bPmp:false</td>
            </tr>
            <tr>
               <td>Pft_lvlWtrTnk:3.22</td>
            </tr>
            <tr>
               <td>Pft_prFltrUpStrm:0.39</td>
            </tr>
            <tr>
               <td>Pft_currPmp:0</td>
            </tr>
            <tr>
               <td>Pft_stPmp:0</td>
            </tr>
            <tr>
               <td>Pft_bVlvFwd01:false</td>
            </tr>
            <tr>
               <td>Pft_bVlvFwd02:false</td>
            </tr>
          </table>
        </div>
    </td>
</tr>
<tr class="d-flex">
   <td class="col-0"></td>
   <td class="col-2">5/3/2021, 3:09:21 pm</td>
   <td class="col-2">C0001_001</td>
   <td class="col-8">
      <div class="table-responsive col-md-10" style="max-height:250px; overflow-y: scroll;">
         <table>
            <tr>
               <td>Rwt_lvlWtrTnk:3.07</td>
            </tr>
            <tr>
               <td>Rwt_bPmp:false</td>
            </tr>
            <tr>
               <td>Pft_lvlWtrTnk:3.92</td>
            </tr>
            <tr>
               <td>Pft_prFltrUpStrm:0.78</td>
            </tr>
            <tr>
               <td>Pft_currPmp:0</td>
            </tr>
            <tr>
               <td>Pft_stPmp:0</td>
            </tr>
            <tr>
               <td>Pft_bVlvFwd01:false</td>
            </tr>
            <tr>
               <td>Pft_bVlvFwd02:false</td>
            </tr>
          </table>
        </div>
    </td>
</tr>

我正在动态形成结构，如下所示

$(document).ready( function () {
    $('#dataMonitorTable').DataTable();
        async function updateLatestData() {
                      await fetch('url')
                      .then((response) => response.json())
                      .then((response) => {
                        var finalJSON = JSON.parse(response.response)
                        var rows = '';
                        var j = 1;
        
                        $.each(finalJSON.response, function(index, item) {
                            var date_value = parseInt(item.doc.time);
                            var tableData = JSON.parse(item.doc.data);
                            var date = new Date(date_value);
        
                            var row = '<tr class="d-flex">';
                            row += '<td class="col-0">' + j++ + '</td>';
                            row += '<td class="col-2">' + date.toLocaleString() + '</td>';
                            row += '<td class="col-2">' + item.doc.NFID + '</td>';
                            row += '<td class="col-8"><div class="table-responsive col-md-10" style="max-height:250px; overflow-y: scroll;"><table>';
                            Object.keys(tableData).forEach(function(key) {
                                row +=  '<tr><td>'+ key + ':' + tableData[key] +'</td></tr>';
                            });
                            row += '</table></div></td>';
                            rows += row + '</tr>';
                        });                    
                        $('#dataMonitorTable tbody').html(rows);
                      
                    })
                      .catch(error => console.error("error",error))
                  }
     setInterval(updateLatestData, 60000)
});

如何为动态加载的数据应用分页

任何想法，将不胜感激。

标签： jquerydatatablespagination

jquery - 使用数据表动态加载数据的分页

问题描述

解决方案

推荐阅读