自動リフレッシュテーブルPHP JavaScript/jQuery

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呼び出しを使用する必要があります。私はあなたが改ページを持っていないのを見ます。これを行う簡単な方法の1つは、AJAX呼び出しを作成してテーブルの項目数を返し、ページ全体をリフレッシュすることです。 1秒ごとにバックエンドからカウントを取得します。比較のため隠し要素にカウントを格納します。

が

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

高度で複雑なテーブル操作のみが行われ、ページ全体を更新することも、カウンターの取得隠しフィールド

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

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

に保存されている数を更新しますフロントエンドでページ全体をリフレッシュせずに見ることができますdatatables

Answer 2

サーバーサイドのデータテーブルを使用するここではあなたの解決方法私の例を試してみよう
https://github.com/eboominathan/ajax_crud_datatables_with_validation