附加<tr>使用 JQuery AJAX 调用逐步转换为 HTML 表（Django 框架）

Question

I am new to Javascript, Jquery and Ajax request and I have an issue with the execution of my scripts.

Basically I have a very long list to display on my home page (1200+ items). I used to load the page normally but since my list would take a long time to load (and since it's right in the middle of the page) there would be an enormous delay before all my HTML elements would show. For example my footer would be the last item to load and it would appear almost a full second after my navbar.

I decided to use AJAX requests to load my HTML first, get my navbar and my footer done and only then fetch my list to show it in the middle of my page.

The first problem I encounter is that while my script is being processed, nothing appears. This means that even if my first list item's "tr" is ready, it will only show when the 1200th's "tr" is also ready. I would need the table to be populated progressively. I can see my "tr"s being generated in my console but they are only applied in my HTML after they are all done (after 12'500ms).

The second problem I have is that while this same script is being processed, my page is unresponsive to my requests. For example I can't "inspect" or click any button on the page until after the script is done. This is concerning because even if the first problem is fixed I still have an unresponsive page for around 12'500 ms.

The code I use is the following:

$(document).ready(function(){
    console.log( "Document Ready" );
    $.ajax({
      url: "update_list/",
      type: 'get',
      success:function(response) {
        buildTable(response)
      }
    });
});

The url provided in the previous code snippet links to this view in my Django backend: (The lists items I want to fetch are company stocks)

def update_list(request, *args, **kwargs):
    if request.is_ajax():
        stocks = StockListView().get_queryset().values('symbol', 'company_name', 'market_cap')
        return JsonResponse({"stocks_serialized": list(stocks)})

And then this is the script to populate my HTML table with:

function buildTable(data){
  var table = document.getElementById('tableId')
  const values = Object.values(data);
  //this step is because I get a dictionary with an array as its first value. We only need the array for the next part.
  const stock_list = values[0]
  for (var i = 0; i < stock_list.length; i++){
    var row = `<tr>
                  <td>${stock_list[i].symbol}</td>
                  <td>${stock_list[i].company_name}</td>
                  <td>${stock_list[i].market_cap}</td>
              </tr>`
              table.innerHTML += row
    console.log( row )
  }
}

Would anybody know how to fix these issues? Do I need to change my strategy to AJAX request only small increments of my list on a scrolldown trigger? Only around 20 elements of my list appear at the time, the rest is only accessible through scroll down in my table.

Thanks everybody for your help!

Answer 1

I found the solution to my problem on Jquery's website: https://www.tutorialrepublic.com/faq/how-to-add-remove-table-rows-dynamically-using-jquery.php

function buildTable(data){
  const values = Object.values(data);
  const stock_list = values[0]
  for (var i = 0; i < stock_list.length; i++){
        //We first declare the variables for each <td> we need
        var symbol = stock_list[i].symbol
        var comanyName = stock_list[i].company_name
        var market_cap = stock_list[i].market_cap_rounded
        //We then append them to a string in html fashion
        added_row = '<tr>'
        + '<td>' + symbol +  '</td>'
        + '<td>' + comanyName +  '</td>'
        + '<td>' + market_cap +  '</td>'
        + '</tr>'
        //To finally append this long string to your table through it's ID:
        $('#tableId').append(added_row)
        };
  };

This made my home page much faster and solved both my problems.

What seemed to slow down the page a lot was this step:

table.InnnerHtml += row