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 with the json by jquery

whenever I use ajax and update page with response data and append some elements in page with jquery, it shows process of appending one by one in jquery very quickly in screen.

1.Can I have way to show all table at once when it is done appending all elements in for loop with jquery?

2.In my example code, It calls ajax after document get ready with $(document).ready() at very first time. It seems quite slow way to show data in table because it call ajax after all html page loaded and then update some part of html with ajax response. Is it wrong way to use ajax???

<html>

<body>
   I have to html syntax to show data list.
   <table id="example">
       <thread>
           <th>order</th>
           <th>title</th>
       </thread>
       <tbody>
       </tbody>
   </table>
   <button onclick="javascript:loadajaxfunction(parameter to update)">Update</button>
</body>

<script>
    $(document).ready(function() {
        loadajaxfunction();
    });

    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);
        }
    });
</script>

</html>

回答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
    }
});

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.

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

来源：https://stackoverflow.com/questions/41338038/show-html-after-completing-work-with-ajax-and-jquery

标签

javascript

jquery

html

ajax