数据表:使用动画实时更新表 - Datatable: update table in realtime with animation

Datatable: update table in realtime with animation

本文关键字：实时更新动画数据表 | 更新日期: 2023-09-27

我正在尝试实现功能，它使用动画实时更新我的数据表的数据，就像Facebook股票代码（侧边栏上的最后朋友活动）一样，但没有找到解决方案！

模型文件：主题.php

public function getTopics()
{
   return $this->db->select('SELECT * FROM topics');
}

索引文件：

<table id="example" class="table table-striped table-bordered" cellspacing="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>Sujet</th>
                <th>Pièce jointe</th>
                <th>Coordonnées</th>
            </tr>
        </thead>
        <tbody>
<!--content table -->
      <?php
      if($data['topics']){
        foreach($data['topics'] as $row){
          echo '<tr>';
          echo '<td>'.$row->id.'</td>';
          echo '<td>'.$row->subject.'</td>';
          echo '<td>'.$row->document.'</td>';
          echo '<td>'.$row->x.','.$row->y.'</td>';
          echo '</tr>';
        }
      }
       ?>
        </tbody>
        </table>

控制器：

$data['topics'] = $this->_topic->getTopics();
                $data['js'] = "<script>
                                  $(document).ready(
                                    function ()
                                    {
                                      $('#example').DataTable().ajax.reload();;
                                    }
                                  );
                               </script>";
View::renderTemplate('header');
View::render('account/topics', $data);
View::renderTemplate('footer', $data);

这就是所谓的实时功能！还有几天的时间！

更新数据并在 ajax 函数上设置间隔，无论您喜欢什么，都可以使用 5 秒或 10 秒。
我要做的另一种方法是使用获取 API 推送器。推送器是一个实时功能的Web应用程序！它可用于在您的网站上实现实时功能！

您可以使用setInterval()每隔x秒，分钟等检查一次主题：

setInterval(function(){
    $.ajax({
         type: 'GET',
         url: 'path/to/query',
         success:function(data){
             if(data != ""){
                $('#datatable-table').dataTable()._fnAjaxUpdate();//reloads table, syntax will differ based on datatables version 
             }
         }
    })
}, 5000);//every 5 seconds

这只是一个例子。您需要计划（例如，当响应时间超过 5 秒时会发生什么？