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

Question

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 wi

Answer 1

You could simply use jQuery datatables. This is a fully featured jQuery plugin for tables with huge data sets, which supports things like refreshing in a given time interval. See here

Answer 2

Try below code: - Use setInterval

1st Step :

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>"
                                );
                        });
                    });
}

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.

});

Step 3: Make one event function for refresh button click event and put this function in .ready() function.

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

Answer 3

Change your jQuery:

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

to

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

and before your

 $.each(

remember to remove all the children :)

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

If you then want to use exactly the same code to run (on a refresh, not just a fetch) with an abort:

$(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();
});

This means that the code will run every 10s, or a click. But won't hammer the server for multiple pending requests.

:)