如何制作每 10 秒刷新一次的 jquery 表

How to make jquery table which is refreshing itself in every 10 secs?

本文关键字：一次 jquery 何制作刷新更新时间：2023-09-26

我正在制作管理门户，管理员可以在其中查看当前预订的总数，为此我们必须每 10 秒自动刷新一次表，并且还会有刷新按钮，它会更新表，我正在使用 JQuery、Ajax、Json、Spring MVC，当我单击按钮时，这也是一个问题它重复了信息。所以请帮我做这两件事自动刷新Jquery表表单数据库和按钮，它们也可以刷新信息而不重复信息，提前感谢帮助和任何建议，

注意：这是工作代码，感谢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>

更改 jQuery：

$(".data-contacts-js").append(

自

$(".data-contacts-js tbody").append( /*This nests properly in html*/

和之前

 $.each(

请记住删除所有子项:)

$(".data-contacts-js tbody").empty();
$.each(

如果您随后想要使用完全相同的代码运行（在刷新时，而不仅仅是获取时）并中止：

$(document).ready(function(){
  var getDataTimeoutId = null,
      refetchTime = 10 /* time in seconds */
      isFetching = false,
      getData = function(){
        if (isFetching) {return;}
        if (getDataTimeoutId !== null){
            window.clearTimeout(getDataTimeoutId);
            getDataTimeoutId = null;
        }
        isFetching = true;
        $.get(
          /* ajax get */
        ).success(function(){
            setDataTimeout(); /* Only auto re-get if there wasn't an error */
        }).always(function(){
            isFetching = false; /* always clear the status */
        });
      },
      setDataTimeout = function(){
        getDataTimeoutId = window.setTimeout(function(){
          getData();
        }, refetchTime * 1000);
      };
  $('#fetchContacts').click(function(){
    getData();
  );
  setDataTimeout();
});

这意味着代码将每 10 秒或单击一次运行一次。但不会为多个挂起的请求锤击服务器。

:)

尝试以下代码： - 使用设置间隔

第一步：

您应该创建一个通用函数，该函数将获取所有数据表单Database如下所示。

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 步：make 函数，它将每 10 秒自动调用函数。使用SetInterval如下。

$(document).ready(function(){
    setInterval(function(){
        fetchData();
    },10000);  // this will call your fetchData function for every 10 Sec.
});

第 3 步：为refresh按钮click event创建一个事件函数，并将此函数放入.ready()函数中。

$('#fetchContacts').click(function() {
     fetchData();
});

你可以简单地使用 jQuery 数据表。这是一个功能齐全的jQuery插件，适用于具有大量数据集的表，它支持在给定时间间隔内刷新之类的功能。看这里