Show Html After Completing Work With Ajax And Jquery

codes below is that I made to explain. So it is not complete one. I wrote just enough to explain my question. html load -> call ajax -> json(response) -> append table row

Solution 1:

1. You can hide the table at first, and then show it all when we have the response. Like this:

   <table id="example" style="visibility: hidden"> <!-- Change here -->
      <thread>
          <th>order</th>
          <th>title</th>
      </thread>
      <tbody>
      </tbody>
   </table>
   

   In JS:

   loadajaxfunction = function(parameter to update) {
   $.ajax({
       url:
       type:
       data:
       success: function(json){
           $tbody = $("#example").find('tbody')
           $row = $('<tr>');
   
           $.each(json.objects, function(key, value){
               $col = $('td>');
               $col.text(value);
               $row.append($col);
           }
           $tbody.append($row);
           $("#example").css('visibility', 'visible'); // <--- And here
       }
   });
   

2. There is nothing wrong with the way you are using Ajax. If you want to render the table faster, try to return it directly in the HTML from server.

3. If you have to do it at client side, try to build the whole table's HTML first before replace it into the <table>, don't access to the DOM too much by appending row by row.

   loadajaxfunction = function(parameter to update) {
   $.ajax({
       url:
       type:
       data:
       success: function(json){
           $tbody = $("#example").find('tbody')
           $row = $('<tr>');
           // Build html for cols
           var cols = '';
           $.each(json.objects, function(key, value){
               cols += '<td>' + value + '</td>'
           }
           // Append it in all by once
           $row.html(cols);
           $tbody.append($row);
           $("#example").css('visibility', 'visible');
       }
   });