title: table with asynchronous loading
body: <p>My fetching time to my DB takes 3-5 secs. so for now I just want to have loading image or whatever to my table while my data is fetching. is it possible to do that in javascript?</p>
  
  <p>Here my button to trigger the load and table to read:</p>
  
  <pre><code>&lt;button style="float:right" type="button" onclick="LoadDB()" class="btn btn-primary"&gt;Load DB&lt;/button&gt;
  
   &lt;table class="sortable" id="DB"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Names&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>script to populate the data to table:</p>
  
  <pre><code>function LoadDB() {        
  
          $.ajax({
              url: '/Home/ReadDB',
              type: 'GET',
  
              dataType: 'json',
              success: function (data) {
                  var row = '';
                  $.each(data, function (i, item) {
                      row += '&lt;tr&gt;&lt;td style="display:none;"  &gt;' + item.Name + '&lt;/td&gt;&lt;td&gt;' + item.Age
                          + '&lt;/td&gt;&lt;td width="50%"&gt;' + '&lt;button style ="width:80px" type="button" class="btn btn-primary"&gt; Add &lt;/button &gt;' + '&lt;/td&gt;&lt;/tr&gt;';
  
                  });
                  console.log(row)
                  $('.sortable#DB2 tbody').html(row); // override previous results              
              },
              error: function (jqXhr, textStatus, errorThrown) {
                  alert(errorThrown);
              }
          });
  
      }
  </code></pre>