Итак, у меня есть таблица, извлекающая информацию из базы данных, и мне было интересно, как я могу обновить ее информацию без перезагрузки всей страницы.
Обновите таблицу с помощью jQuery/Ajax каждые 5 секунд.
Ответ 1
Вам понадобится страница getTable.php
, отображающая вашу таблицу, и ничего больше: никаких заголовков, нижних колонтитулов и т.д.
PHP (getTable.php) - это может быть любой код на стороне сервера (asp, html и т.д.)
<?php
echo '<table><tr><td>TEST</td></tr></table>';
?>
Затем в вашем JS вы можете легко обновить таблицу с помощью метода load()
:
HTML
<div id="tableHolder"></div>
JS
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
Ответ 2
Используйте ajax, следующий пример находится в jQuery:
$(function() {
var prevAjaxReturned = true;
var xhr = null;
setInterval(function() {
if( prevAjaxReturned ) {
prevAjaxReturned = false;
} else if( xhr ) {
xhr.abort( );
}
xhr = $.ajax({
type: "GET",
data: "v1="+v1+"&v2="+v2,
url: "location/of/server/script.php",
success: function(html) {
// html is a string of all output of the server script.
$("#element").html(html);
prevAjaxReturned = true;
}
});
}, 5000);
});
Функция успеха предполагает, что ваш сервер script выводит html, который вы хотите заменить в элементе с id 'element'.
Ответ 3
У вас должна быть страница, которая возвращает информацию и извлекает данные с помощью Ajax/jQuery.
<div class="result"></div>
setInterval(function() {
$.get('test.php', function(data) {
$('.result').html(data);
});
}, 5000);
Ответ 4
Вот вам еще один вариант. Это решение использует IIFE, который предпочтительнее, чем setInterval. Вы можете узнать больше о IIFE по ссылке выше.
JAVASCRIPT:
var $results = $('#results'),
loadInterval = 5000;
(function loader() {
$.get('script.php', function(html){
$results.hide(200, function() {
$results.empty();
$results.html(html);
$results.show(200, function() {
setTimeout(loader, loadInterval);
});
});
});
})();
HTML:
<div id="results"></div>
Ответ 5
setTimeout(function(){
jqueryFunction(Args);
},100);
будет работать...
100 = 100 миллисекунд
Ответ 6
Следующие работы с JQuery Datatables 1.10
`var tableName;
//Set AJAX Refresh interval.
$(function() {
setReloadInterval(10); //Refresh every 10 seconds.
}
//Because function takes seconds we * 1000 to convert seconds to milliseconds.
function setReloadInterval(reloadTime) {
if(reloadTime > 0)
internalId = setInterval("reloadTable()", (reloadTime * 1000);
}
//Auto Refresh JQuery DataTable
function reloadTable() {
tableName.ajax.reload();
}
//Table defined...
$(document).ready(function () {
tableName = $('#tableName').DataTable({
"sAjaxSource": "/someUrl",
});`