how to load a table after the data is fetched

Question

I am currently developing a web application and I am fetching a huge amount of data through ajax request triggering it by onload event on body.My table requires jquery and other CSS files for UI once the data is retrieved when I try to append the data to the table the styling and other features(jquery) does not apply to new data and I can't refresh the whole page because it makes an another ajax call. So, is there a way to reload(refresh) that particular table after the data is received or blocking the table from loading until after the data is received.

Answer 1

There are multiple solutions and possibly not all are suitable for every setup. Specifically, if you use an MVVM framework such as Angular, Vue or similar, you should be able to leverage their components to do the job. Since you mention none such framework, I assume you want a vanilla JS solution.

One possibility is to create an empty table and build the missing HTML by hand inside the ajax call's callback:

<table id="foo"></table>

<script>
    const callback = (results) => {
        const table = document.getElementById("foo");
        let innerHTML = "";
        results.forEach((result) => {
            innerHTML += `<tr><td>${result.column1}</td>` +
                         `<td>${result.column2}</td></tr>`;
        });
        table.innerHTML = innerHTML;
    };
</script>

You could also consider using HTML templates . In your ajax call's callback, you could process the data to fill the template and then append as many rows as needed to your table:

<table id="foo"></table>
<template id="bar">
    <tr>
        <td></td>
        <td></td>
    </tr>
</template>

<script>
    const callback = (results) => {
        const table = document.getElementById("foo");
        const rowTemplate = document.getElementById("bar");
        results.forEach(result => {
            const cells = rowTemplate.content.querySelectorAll("td");
            cells[0].textContent = result.column1;
            cells[1].textContent = result.column2;

            table.appendChild(document.importNode(rowTemplate.content, true));
        });
    };
</script>

An even more interesting way of leveraging the templates would probably be using a templating engine. Here's an example using Nunjucks:

<table id="foo"></table>
<template id="bar">
    {% for result in results %}
    <tr>
        <td>{{result.column1}}</td>
        <td>{{result.column2}}</td>
    </tr>
    {% endfor %}
</template>

<script>
    const callback = (results) => {
        const table = document.getElementById("foo");
        const templateHTML = document.getElementById("bar").innerHTML;
        const rowTemplate = nunjucks.compile(templateHTML);

        table.innerHTML = rowTemplate.render({results});
    };
</script>

Finally, if you have control over the data returned by the ajax call, you could also go the old-fashioned way and just return HTML there instead of, say, a JSON array.

As for CSS styling, you need to make sure the CSS rules are written in a way that will be applied to the generated code. They will be used automatically without the need to reload the page.

Should you need to do further operations on the table rows, ie add event listeners, it would be best to just set them on the table element and then check the event target. This way you can manipulate the table contents without the need to remove and re-add any event listeners.