Auto Refresh Table PHP JavaScript/jQuery

Question

I want to refresh my table automatically when i add new row in database. I don't have any idea to create it.

<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

You need to use AJAX calls. I see you don't have pagination. One easy way to do this is to create an AJAX call that return the count of items from table and then refresh the entire page. Get the count from back end every 1 second. Store the count in a hidden element for comparison. Refreshing the entire page will also update the count stored in hidden field

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

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

Getting the counter:

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

If you want advanced and complex table manipulation made only on front end without refresing the entire page you can take a look at datatables

Answer 2

Use Server side datatable ,Here your solution Try my example one
https://github.com/eboominathan/ajax_crud_datatables_with_validation