Datentabelle nach Datenbankaktualisierung aktualisieren

Question

In meiner HTML-Seite habe ich eine Tabelle, die Daten anzeigt, die aus meiner Datenbank stammen. Ich möchte die Datentabelle aktualisieren, wenn meine Datenbank aktualisiert wird, ohne die gesamte Seite zu aktualisieren. Ich benutze PHP framwork 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

Verwenden Sie dieses Paket, seine große und ich benutze es die ganze Zeit. Das ist ein Laravel Wrapper für datatables.net

Github DataTables

Answer 3

Beispiel mit jQuery. Beachten Sie, dass dies nur eine von 1000 Möglichkeiten ist, dies zu tun. Dies umreißt nur die Grundidee des Prozesses, eine Tabelle mit AJAX und Laravel zu erstellen. Es ist nicht als Drop-In-Code-Segment gedacht.

Basistabellencode

<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 (oder ähnlich)

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

Wie in den Kommentaren erwähnt, können Sie Frameworks wie jQuery verwenden, um eine Echtzeit-Modul zu bauen.

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

In Ihrer PHP-Datei stellen Sie Ihren Code die Datenbank anzuzeigen, und dann können Sie es in einem setInterval wickeln, damit Ihre Anfrage wird jede X Anzahl von Sekunden gesendet.

Dokumentation:

$.get - jQuery
setInterval - JS