CODEWITHSUNDEEP
javascriptjqueryajax
user2661518
user2661518

Reputation: 2755

show page loading icon while loading table

I have table in html file as <table id="table" class="table table-striped"> And I call getTableData function and dynamically update table using jquery

     $(document).ready(function(){
            getTable();
           $(document).ajaxStop(function () {
          ...
    });

I am using ajaxStop to run next functions after table is rendered.

    function getTable(){
    $.get("api/table", function(data){
    setTable(data);
    }
}

where setTable renders table. How can I show loading icon while table data is fetched?

Upvotes: 1

Views: 58

Answers (1)

Arthur
Arthur

Reputation: 5158

With jQuery you can send a success callback on $.get() (so when data are received) and handle your loading with a CSS class:

 function getTable(){
     // Before call your server Add loading style
     $('#table').addClass('is-loading')
     $.get("api/table", function(data){
          // Just after receiving data Remove loading style
          $('#table').removeClass('is-loading')
          setTable(data);
     }
 }

Upvotes: 2

Related Questions