Question

我想在数据库中添加新行时自动刷新表格。我不知道要创造它。

<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>

Answer 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

Answer 2

使用服务器端数据表，在这里您的解决方案尝试我的示例一 https://github.com/eboominathan/ajax_crud_datatables_with_validation

自动刷新表PHP JavaScript / jQuery

2 个答案: