使用基于 Codeigniter 的 Jquery Java 刷新 html table

Question

伙计们，我有一个来自外包 table 的数据，我将在 table 中展示。原始数据来自 Json，我正在使用 PHP 函数解码并显示。

我一直在谷歌上搜索自动刷新该数据并找到了这个 Auto refresh table without refreshing page PHP MySQL

我已经成功构建了 Ticked 答案中建议的内容，看起来像是第一次工作，但它没有刷新。所以当页面加载时

我叫这个

$(document).ready (function () {
                    var updater = setTimeout (function () {
                        $('div#user_table').load ('get_new_data', 'update=true');
                        /*  location.reload(); */
                    }, 1000);
                });

从控制器文件加载名为 get_new_data 的函数并加载到

 <div class="container-fluid" id="user_table">

                       </div>

Codeigniter 控制器功能是

 public function get_new_data(){

    $url = 'https://gocleanlaundry.herokuapp.com/api/users/';
    $result = $this->scripts->get_data_api($url);
    $data_row = $result;


                            $tbl    = '';
                            $tbl .= '<table class="table table-striped table-responsive" id="tableSortableRes">
                               <thead>
                                   <tr>
                                       <th>Name</th>
                                       <th>Email Address</th>
                                       <th>Role</th>
                                       <th>Status</th>
                                       <th>Action</th>
                                   </tr>
                               </thead>
                               <tbody>';

                                foreach($data_row as $row){
                                $tbl .= '<tr class="gradeX">
                                       <td>' . $row->name . '</td>
                                       <td>' . $row->email . '</td>
                                       <td>' . $row->role . '</td>
                                       <td><p id="' . $row->_id. '_status">'.( $row->alive == true ?  'Active' : 'Banned').' </p></td>
                                       <input id="' . $row->_id . 'status_val" value="' . $row->alive . '" type="hidden">
                                       <td class="center">

                                      <a href="#" id="' . $row->_id . '_rec" onclick="UpdateStatus(' . $row->_id . ')" class="btn btn-mini ">'
                                       . ($row->alive == '1' ? '<i class="fa fa-thumbs-o-up fa-fw"></i>' :  '<i class="fa fa-thumbs-o-down fa-fw"></i>' ) . '</a>
                                       </td>

                                   </tr>
                               ';
                                }
                                $tbl .= '</tbody>
                           </table>';

                                echo $tbl;

}

正如我所说，当页面加载显示数据时，某些东西正在工作，但是当我将新数据添加到数据库时，它不会自动显示。我想要调用和刷新数据的函数。抱歉，我是 javascript 和 jQuery 的新手，所以请放轻松 :)

谢谢大家

Answer 1

要每 15 秒刷新一次（每分钟 4 次），您应该使用 setInterval 函数代替 setTimeout。

您的代码将是这样的：

$(document).ready (function () {
    var updater = setInterval (function () {
        $('div#user_table').load ('get_new_data', 'update=true');
    }, 25000);
});

编辑：但是如果你想确保不要让你的页面超载，并且按照你的要求，首先加载数据然后定期刷新。您必须执行以下操作：

第一次加载您的数据。
完成后调用setTimeout在25秒后刷新
当您的页面刷新时，调用 SetTimeout 以在 25 秒内刷新它。
一次又一次。

这比使用 setInterval 更好。为此，您必须使用 jQuery 加载函数 http://jqapi.com/#p=load 的完整回调。

function refresh() {
    setTimeout(function() {
          $('div#user_table').load ('get_new_data', 'update=true', refresh);
    }, 25000);
}

$(document).ready (function () {
    $('div#user_table').load ('get_new_data', 'update=true', refresh);
});

使用基于 Codeigniter 的 Jquery Java 刷新 html table

Refreshing html table using Jquery Java built on Codeigniter

javascript

php

jquery

codeigniter

refresh