如何制作每10秒刷新一次的jquery表？ [英] How to make jquery table which is refreshing itself in every 10 secs?
问题描述
我正在制作管理员门户网站，管理员可以看到当前预订的总数，为此我们必须每10秒自动刷新一次，并且会有也刷新按钮，更新表，我使用的是JQuery，Ajax，Json，Spring MVC，当我点击按钮时，这也是一个问题它重复了这些信息。所以请帮我制作这两件事自动刷新Jquery表格数据库和按钮，它也刷新信息而不重复信息，预先感谢您的帮助和建议，
I am making admin portal, where admin can see the total number of current booking, for this we have to refresh table every 10 sec automatically and there will be also refresh button, which updates the table, I am using the JQuery, Ajax, Json, Spring MVC, Here is also one problem when I click on button It repeats the information. So please help me making these two things automatically refreshing Jquery table form database and Button which also refresh information without repeating the information, Thanks in advance for help and any suggestion,
注意：这是工作代码，感谢Prog和ChrisH619
<!DOCTYPE html>
<html>
<head>
<title>Service for home - New Page - Next Generation of Service Provider - Admin Home Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<link href="assets/DT_bootstrap.css" rel="stylesheet" media="screen">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts-js tbody").empty();
$.get("http://www.service4homes.com:8080/HomeServiceProvider/booking/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
$('#fetchContacts').click(function() {
fetchData();
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<!--/span-->
<div class="span9" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
<th>Address</th>
<th>Date</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
</div>
</div>
</div>
<!--/.fluid-container-->
<script src="vendors/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/scripts.js"></script>
<script src="assets/DT_bootstrap.js"></script>
<script>
$(function() {
});
</script>
</body>
</html>
推荐答案
尝试以下代码： - 使用 setInterval
第1步：
你应该创建一个通用函数来获取所有数据数据库如下所示。
You should create one common function which will fetch all data form Database as below.
function fetchData(){
$(".data-contacts-js tbody").empty(); // this will remove all <tr>.
$.get("http://localhost:8080/Hotels/reservation/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
第2步：
制作功能这将使用 SetInterval 在每 10秒。中自动调用函数，如下所示。
Step 2:
Make function which will call function automatically in every 10 sec. using SetInterval as below.
$(document).ready(function(){
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 10 Sec.
});
第3步：
为<$创建一个事件函数c $ c>刷新按钮点击事件并将此功能放入 .ready（）函数。
Step 3:
Make one event function for refresh button click event and put this function in .ready() function.
$('#fetchContacts').click(function() {
fetchData();
});
这篇关于如何制作每10秒刷新一次的jquery表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
