数据库更新后刷新数据表答案

【问题标题】：refresh datatable after database update数据库更新后刷新数据表
【发布时间】：2016-07-25 14:41:23
【问题描述】：

在我的 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>

【问题讨论】：

使用任何 javascript 框架，例如 jQeury/Vuejs 将查询发送到数据库并显示。
怎么能这样，你能举个例子吗

标签： javascript php html laravel

【解决方案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

【讨论】：

【解决方案2】：

使用这个包，它很棒，我一直在使用它。这是 datatables.net 的 laravel 包装器

Github DataTables

【讨论】：

【解决方案3】：

使用 jQuery 的示例。请注意，这只是 1000 种方法之一。这只是概述了使用 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     
});

【讨论】：

【解决方案4】：

就像在 cmets 里面提到的，你可以使用像 jQuery 这样的框架来构建一个实时模块。

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

在您的 PHP 文件中，您可以将代码用于显示数据库，然后您可以将其包装在 setInterval 中，这样您的请求就会每隔 X 秒数发送一次。

文档：

$.get - jQuery
setInterval - JS

【讨论】：