データベース更新後のデータテーブルの更新

Question

私のhtmlページには、自分のデータベースから来たデータを表示するテーブルがあります。すべてのページを更新せずにデータベースが更新されたときに、データテーブルをリフレッシュする必要があります。私はPHPフレームワークLaravelを使用しています。

<table id="example" class="table"> 
 
    <thead> 
 
    <tr class="headings"> 
 
     <th>ID &nbsp;&nbsp;&nbsp;</th> 
 
     <th>first name </th> 
 
     <th>last name </th> 
 
     <th>E-mail </th> 
 
     <th>birthday </th> 
 
    </tr> 
 
    </thead> 
 

 
    <tbody> 
 
    @foreach ($users as $user) 
 
    <tr class="even pointer"> 
 
     <td class=" ">{{ $user->id }}</td> 
 
     <td class=" ">{{ $user->name }}</td> 
 
     <td class=" ">{{ $user->name2 }}</td> 
 
     <td class=" ">{{ $user->email }}</td> 
 
     <td class=" ">{{ $user->birthday }}</td> 
 
    </tr> 
 
    @endforeach 
 
    </tbody> 
 
</table>

Answer 1

setTimeout(function(){ 
 
    $("#mytable").load("your-current-page.html #mytable"); 
 
}, 2000); 
 
<button id="refresh-btn">Refresh Table</button> 
 

 
<script> 
 
$(document).ready(function() { 
 

 
    function RefreshTable() { 
 
     $("#mytable").load("your-current-page.html #mytable"); 
 
    } 
 

 
    $("#refresh-btn").on("click", RefreshTable); 
 

 
    // OR CAN THIS WAY 
 
    // 
 
    // $("#refresh-btn").on("click", function() { 
 
    // $("#mytable").load("your-current-page.html #mytable"); 
 
    // }); 
 

 

 
}); 
 
</script>

How to refresh table contents in div using jquery/ajax

Answer 2

、このパッケージを使用してその偉大なと私はすべての時間それを使用しています。 jQueryのを使用してdatatables.net

Github DataTables

Answer 3

例についてlaravelラッパーです。これはこれを行う1000の方法の1つに過ぎないことに注意してください。これは、AJAXとLaravelを使用してテーブルを構築するプロセスの基本的な考え方の概要を示しています。ドロップインコードセグメントではありません。

基本表コード

<table id="example" class="table"> 
    <thead> 
     <tr class="headings"> 
      <th>ID &nbsp;&nbsp;&nbsp;</th> 
      <th>first name </th> 
      <th>last name </th> 
      <th>E-mail </th> 
      <th>birthday </th> 
     </tr> 
    </thead> 

    <tbody> 
     <?php // empty for now ?> 
    </tbody> 
</table> 

tablecontents.blade.php

<?php // Requires the $users table ?> 
@foreach ($users as $user) 
    <tr class="even pointer"> 
     <td class=" ">{{ $user->id }}</td> 
     <td class=" ">{{ $user->name }}</td> 
     <td class=" ">{{ $user->name2 }}</td> 
     <td class=" ">{{ $user->email }}</td> 
     <td class=" ">{{ $user->birthday }}</td> 
    </tr> 
@endforeach 

AjaxController.php（または類似の）

function getUpdatedTable() { 
    $users = //get users 
    return view("tablecontents", [ "users", $users ]); 
} 

JavaScriptの

function updateTable() { 
    $.ajax({ 
     url: "ajax/getUpdatedTable", 
     success: function (data) { 
      $("#example tbody").html(data); 
     } 

    }); 
} 

$(document).ready(function() { 
    updateTable(); 
    setInterval(updateTable, 5000); //Re-update every 5 seconds  
}); 

Answer 4

コメントの内側に述べたように、あなたはリアルタイムモジュールを構築するためにjQueryのようなフレームワークを使用することができます。あなたのPHPファイル内の

$(document).ready(function() { 
    $.get('generic-handler.php') 
     .done(function (data) { 
      $('#realtime').innerHTML = data; 
     }); 
}); 

は、データベースを表示するためにあなたのコードを入れて、あなたはので、あなたの要求は秒のすべてのX数を送られsetIntervalでそれをラップすることができます。

ドキュメント：

$.get - jQuery
setInterval - JS