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

Posted

技术标签:

【中文标题】使用数据表动态加载数据的分页【英文标题】:Pagination for dynamically loaded data with datatables 【发布时间】:2021-06-04 00:33:19 【问题描述】:

我在页面加载时第一次从服务器端加载表格中的数据,并使用 dataTables 设置分页和搜索框。此后,我想每 60 秒加载一次 <tbody> 内的数据,而不刷新页面。页面第一次加载时,正确应用分页,每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)
);

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

任何想法都将不胜感激。

【问题讨论】:

能否展示初始化数据表的代码? 我更新了关于初始化数据表的问题 【参考方案1】:

代码行之后

            $('#dataMonitorTable tbody').html(rows);

您必须重新初始化数据表,以便重置所有数据和分页

            $('#yourtableID').DataTable( );

【讨论】:

如果只在函数中初始化datatable,那么页面第一次加载时不会分页。此外,您的答案仅在第一个时间间隔有效,当它下次循环时,数据表已经在页面中初始化 有些东西我不明白,第一次加载页面时你有另一个功能(加载数据表)? 不是其他功能。我已经在 $(document).ready(function ()) 中初始化了数据表。所以它在页面加载时被初始化 我在循环中遵循了你的初始化方法。我在每次初始化之前添加了诸如销毁数据表之类的代码,并且可以正常工作!感谢您的帮助【参考方案2】:

对于每个时间间隔的循环,检查数据表是否处于活动状态,如果是,则销毁表并在附加表结构后重新初始化。

  $(document).ready( function () 
            $('#dataMonitorTable').DataTable();

            async function updateLatestData() 
              await fetch('http://localhost:8080/fetch_all_data')
              .then((response) => response.json())
              .then((response) => 
               // console.log('strings',JSON.stringify(response.response))
                var finalJSON = JSON.parse(response.response)
                var rows = '';
                var j = 1;

                $.each(finalJSON.response, function(index, item) 
                    //console.log("items",item.doc.time)
                    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>';
                );
                if ( $.fn.DataTable.isDataTable('#dataMonitorTable') ) 
                    $('#dataMonitorTable').DataTable().destroy();
                
                $('#dataMonitorTable tbody').empty();
                $('#dataMonitorTable tbody').html(rows);
                $('#dataMonitorTable').DataTable();
            )
              .catch(error => console.error("error",error))
          

          setInterval(updateLatestData, 60000)
      );

【讨论】:

以上是关于使用数据表动态加载数据的分页的主要内容,如果未能解决你的问题,请参考以下文章

Angular 1.x - 无法通过动态数据检索实现分页[重复]

jquery easyui datagrid在进行初始化页面加载的时候,如何数据没有加载完毕,动态加载数据.

动态数据的分页器/排序不起作用

jquery tmpl 详解

jquery tmpl 详解

jquery tmpl 详解