Как сделать таблицу jquery, которая освежает себя каждые 10 секунд?

Я создаю портал администратора, где администратор может видеть общее количество текущих заказов, Для этого мы должны обновить таблицу каждые 10 секунд автоматически и там будет также кнопка обновления, которая обновляет таблицу, я использую JQuery, Ajax, Json, Spring MVC. Здесь также есть одна проблема, когда я нажимаю кнопку. Он повторяет эту информацию. Поэтому, пожалуйста, помогите мне сделать эти две вещи автоматически обновляющейся базой данных таблицы JQuery и Button, которая также обновляет информацию, не повторяя информацию, заблаговременно за помощь и любые предложения,Как сделать таблицу jquery, которая освежает себя каждые 10 секунд?

Примечание: Это рабочий код, благодаря 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>

источник

2015-01-26 geeks

Похоже, вы используете DataTables, если так он имеет встроенный метод для обновления данных AJAX это связано с: '$ («# стол») DataTable() ._ fnAjaxUpdate();. ' –

Я обновил код в соответствии с Prog и ChrisH619, его рабочий код. спасибо, ребята, за вашу помощь. – geeks

Try ниже код: - Использование setInterval

первый шаг:

Вы должны создать одну общую функцию, которая закачает все формы 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(); 
});

источник

2015-01-26 10:09:02 prog1011

@neelabhsingh - попробуйте использовать 'setInterval' – prog1011

Спасибо за ответ yor, ваш метод работает, он обновляет данные, но его добавляет новые данные для старых данных, поэтому я использую $ (". data-contacts-js tbody"). empty(); в вашем коде, который сказал ChrisH619, Спасибо вам обоим. Обновите свой код, потому что он также содержит старые данные, поэтому измените $ ("# data-contacts-js> tbody"). Html (""); to $ ("data-contacts-js tbody"). empty() ;, спасибо – geeks

@neelabhsingh - Спасибо за исправление :). Рад помочь вам. – prog1011

Изменить 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 секунд или щелчок. Но не будет забивать сервер для нескольких ожидающих запросов.

источник

2015-01-26 09:55:14 ChrisH619

Наверное, хорошая идея [сбросить таймер] (http://stackoverflow.com/questions/1472705/resetting-a-settimeout) при регистрации функции щелчка? – Terry

@terry добавил таймер повторного набора, и только auto-gets, если нет erors. – ChrisH619

@ ChrisH619, спасибо за ваш ценный повтор ... – geeks

Вы могли бы просто использовать JQuery DataTables. Это полнофункциональный плагин jQuery для таблиц с огромными наборами данных, который поддерживает такие функции, как обновление в заданный интервал времени. См here

источник

2015-01-26 09:59:46 alpham8

спасибо за ваш ответ ... – geeks

Как сделать таблицу jquery, которая освежает себя каждые 10 секунд?

ответ

Смежные вопросы