Javascript 如何在单个HTML页面中创建多个正在刷新自身的jquery表？
我正在制作管理门户，在那里管理员可以看到当前预订的总数，为此，我们必须每10秒自动刷新一次表，还有刷新按钮，它也会刷新表，我使用JQuery、Ajax、Json、Spring MVC，我正在尝试创建多个Jquery表，每10秒刷新一次自己。但是只有一个表正在刷新，其他表没有。，提前感谢您的帮助和建议Javascript 如何在单个HTML页面中创建多个正在刷新自身的jquery表？,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在制作管理门户，在那里管理员可以看到当前预订的总数，为此，我们必须每10秒自动刷新一次表，还有刷新按钮，它也会刷新表，我使用JQuery、Ajax、Json、Spring MVC，我正在尝试创建多个Jquery表，每10秒刷新一次自己。但是只有一个表正在刷新，其他表没有。，提前感谢您的帮助和建议 主页服务-新页面-下一代服务提供商-管理员主页 函数fetchData（）{ $（“.data-contacts1-js tbody”）.empty（）； $.get（”http://loca
主页服务-新页面-下一代服务提供商-管理员主页
函数fetchData（）{
$（“.data-contacts1-js tbody”）.empty（）；
$.get（”http://localhost:8080/HotelServiceProvider/getAllHotelBookingDetails，函数（数据）{
$。每个（数据、功能（i、联系人）{
$（“.data-contacts1-js”）.append(
“”+contact.custId+“”+
“”+contact.custName+“”+
“”+contact.custMobile+“”+
“”+contact.custmail+“”+
“”+contact.custAddress+“”+
“”+联系人。日期+“”+
“”+联系人。时间+“”
);
});
});
}
$（文档）.ready（函数（）{
$（“.data-contacts1-js tbody”）.empty（）；
setInterval（函数（）{
fetchData（）；
}，10000）；//这将每隔5秒调用fetchData函数。
});
$（文档）.ready（函数（）{
$（“.data-contacts1-js tbody”）.empty（）；
$（'#fetchContacts1'）。单击（函数（）{
fetchData（）；
});
});
函数fetchData（）{
$（“.data-contacts2-js tbody”）.empty（）；
$.get（”http://localhost:8080/PGServiceProvider/getAllPgBookingDetails，函数（数据）{
$。每个（数据、功能（i、联系人）{
$（“.data-contacts2-js”）.append(
“”+contact.custId+“”+
“”+contact.custName+“”+
“”+contact.custMobile+“”+
“”+contact.custmail+“”+
“”+contact.custAddress+“”+
“”+联系人。日期+“”+
“”+联系人。时间+“”
);
});
});
}
$（文档）.ready（函数（）{
$（“.data-contacts2-js tbody”）.empty（）；
setInterval（函数（）{
fetchData（）；
}，10000）；//这将每隔5秒调用fetchData函数。
});
$（文档）.ready（函数（）{
$（“.data-contacts2-js tbody”）.empty（）；
$（'#fetchContacts2'）。单击（函数（）{
fetchData（）；
});
});
木工服务
身份证件
客户名称
客户手机
客户电子邮件
地址
日期
时间
地位
刷新
木工服务
身份证件
客户名称
客户手机
客户电子邮件
地址
日期
时间
地位
刷新
<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-contacts1-js tbody").empty();
$.get("http://localhost:8080/HotelServiceProvider/getAllHotelBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts1-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-contacts1-js tbody").empty();
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$(".data-contacts1-js tbody").empty();
$('#fetchContacts1').click(function() {
fetchData();
});
});
</script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts2-js tbody").empty();
$.get("http://localhost:8080/PGServiceProvider/getAllPgBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts2-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-contacts2-js tbody").empty();
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$(".data-contacts2-js tbody").empty();
$('#fetchContacts2').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-contacts1-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="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
<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-contacts2-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="fetchContacts2" 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>
<!-- script block 1 -->
<script>
setTimeout(test,100);//will call test #1
setTimeout(function() {
test();//will call test #2
},100);
//test #1
function test() {
console.log(1);
}
</script>
<!-- script block 2 -->
<script>
setTimeout(test,100); //will call test #2
setTimeout(function() {
test(); //will call test #2
},100);
//test #2
function test() {
console.log(2);
}
</script>