[英]Refresh only the values of a table with jQuery/Ajax without reloading the page
I have been following various jQuery/Ajax threads on stackoverflow for refreshing tables without loading the entire page, however, it seems that this does not prevent the table from reloading itself.我一直在关注 stackoverflow 上的各种 jQuery/Ajax 线程,以在不加载整个页面的情况下刷新表格,但是,这似乎并不能阻止表格自行重新加载。 Is there any way to refresh only the table values, but keep the table from redrawing?有没有办法只刷新表格值,但不重绘表格?
Resources I have been looking at-我一直在看的资源-
How to refresh table contents in div using jquery/ajax 如何使用 jquery/ajax 刷新 div 中的表格内容
Redraw datatables after using ajax to refresh the table content? 使用ajax刷新表格内容后重绘数据表?
More or less, I have a getTable.php
page that displays my table, and nothing else: no headers, footers, etc.或多或少,我有一个getTable.php
页面显示我的表格,没有别的:没有页眉、页脚等。
PHP (getTable.php) - this is server side code (asp, html, etc..) PHP (getTable.php) - 这是服务器端代码(asp、html 等)
<?php
echo '<table><tr><td>TEST</td></tr></table>';
?>
Then, in my JS, I refresh the table by using the load() method:然后,在我的 JS 中,我使用 load() 方法刷新表格:
HTML HTML
<div id="tableHolder"></div>
JS JS
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 10000);
});
}
</script>
Every 10 seconds the entire table reloads.整个表每 10 秒重新加载一次。 I understand it is because of the load, but how do I only update the values?我知道这是因为负载,但我如何只更新值?
Consider the following example.考虑以下示例。
$(function() { function makeTable(data, target) { var table = $("<table>"); $("<thead>").appendTo(table); $("<tbody>").appendTo(table); // Build Header var headers = Object.keys(data[0]); $("<tr>").appendTo($("thead", table)); $.each(headers, function(i, v) { $("<th>").html(v).appendTo($("thead > tr", table)); }); // Build Body $.each(data, function(i, r) { var row = $("<tr>").appendTo($("tbody", table)); $.each(r, function(j, c) { $("<td>").html(c).appendTo(row); }); }); if (target == undefined) { return table; } else { table.appendTo(target); } } function updateTable(target, rows) { var body = $("tbody", target); var row; body.empty(); $.each(rows, function(i, r) { row = $("<tr>").appendTo(body); $.each(r, function(j, c) { $("<td>").html(c).appendTo(row); }); }); } var myTableData = [{ "fruit": "apple", "price": 1.50, "quantity": 3 }, { "fruit": "banana", "price": 0.75, "quantity": 20 }, { "fruit": "dragonfruit", "price": 3, "quantity": 1 }]; var newTableData = [{ "fruit": "apple", "price": 1.50, "quantity": 2 }, { "fruit": "banana", "price": 0.95, "quantity": 20 }, { "fruit": "grapes", "price": 2.40, "quantity": 12 }] makeTable(myTableData, "#tableHolder"); var timer = setInterval(function() { updateTable("#tableHolder", newTableData) }, 10 * 1000); });
#tableHolder table { width: 100%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tableHolder"></div>
This uses one function to build the table based on JSON Data.这里使用一个function根据JSON数据建表。 It extracts the headers and builds the rows from data provided.它提取标题并根据提供的数据构建行。 So you will want to update your PHP Code to act more like an API and upon the request it can provide the JSON data instead of the HTML Data.因此,您需要更新 PHP 代码,使其更像 API,并且根据请求它可以提供 JSON 数据,而不是 HTML 数据。
The second function is very similar except it just erases the rows and re-writes them.第二个 function 非常相似,除了它只是擦除行并重新写入它们。
I can then use setInterval
to run this every 10 seconds.然后我可以使用setInterval
每 10 秒运行一次。
See More: https://www.w3schools.com/jsref/met_win_setinterval.asp查看更多: https://www.w3schools.com/jsref/met_win_setinterval.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.