自动刷新表格 PHP JavaScript/jQuery答案

【问题标题】：Auto Refresh Table PHP JavaScript/jQuery自动刷新表格 PHP JavaScript/jQuery
【发布时间】：2016-07-02 23:13:43
【问题描述】：

当我在数据库中添加新行时，我想自动刷新我的表。我没有任何想法来创建它。

<div class="row">
            <div class="col-md-6">
                <legend>Typy Darmowe</legend><hr>
                <table class="table" id="types-free">
                    <thread>
                        <tr>
                            <th>ID</th>
                            <th>Mecz</th>
                            <th>Typ</th>
                            <th>Data Dodania</th>
                            <th>URL</th>
                        </tr>
                    </thread>
                    <tbody>
                        <?php foreach($types as $type) { ?>
                        <tr>
                            <td><?php echo $type->t_id; ?></td>
                            <td><?php echo $type->t_match; ?></td>
                            <td><?php echo $type->t_type; ?></td>
                            <td><?php echo $type->t_date; ?></td>
                            <td><?php echo $type->t_url; ?></td>
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>

【问题讨论】：

你已经开始了吗？

标签： javascript php jquery mysql codeigniter

【解决方案1】：

您需要使用 AJAX 调用。我看你没有分页。一种简单的方法是创建一个 AJAX 调用，该调用返回表中的项目数，然后刷新整个页面。每 1 秒从后端获取计数。将计数存储在隐藏元素中以进行比较。刷新整个页面也会更新隐藏字段中存储的计数

setTimeout(function(){
    var request = $.ajax({
      url: "countRows.php",
      method: "GET"
    });

    request.done(function( data ) {
      if($('#count').val() != data.count) {
        location.reload();
      }
    });
}, 1000);

获取计数器：

<?php 
// countRows.php
// -- run sql 'SELECT count(id) FROM table_name
// get the count value
echo json_encode(['count' => $count]);

HTML：

<input type="hidden" id="count" value="<?php echo count($types);?>"/>
    <div class="row">
                <div class="col-md-6">
                    <legend>Typy Darmowe</legend><hr>
                    <table class="table" id="types-free">
                        <thread>
                            <tr>
                                <th>ID</th>
                                <th>Mecz</th>
                                <th>Typ</th>
                                <th>Data Dodania</th>
                                <th>URL</th>
                            </tr>
                        </thread>
                        <tbody>
                            <?php foreach($types as $type) { ?>
                            <tr>
                                <td><?php echo $type->t_id; ?></td>
                                <td><?php echo $type->t_match; ?></td>
                                <td><?php echo $type->t_type; ?></td>
                                <td><?php echo $type->t_date; ?></td>
                                <td><?php echo $type->t_url; ?></td>
                            </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>

如果您想只在前端进行高级和复杂的表格操作而不刷新整个页面，您可以查看datatables

【讨论】：