提取數據后如何加載表

Question

我目前正在開發一個Web應用程序，並且正在通過ajax請求獲取大量數據，該請求是通過主體上的onload事件觸發它來觸發的。當我嘗試將數據追加到數據庫時，一旦檢索到數據，我的表就需要jquery和其他CSS文件用於UI該表的樣式和其他功能（jquery）不適用於新數據，我無法刷新整個頁面，因為它進行了另一個ajax調用。 因此，有一種方法可以在接收到數據后重新加載（刷新）該特定表，或阻止該表加載直到接收到數據后。

Answer 1

有多種解決方案，可能並非所有解決方案都適合每種設置。 具體來說，如果您使用Angular，Vue或類似的MVVM框架，則應該能夠利用它們的組件來完成這項工作。 既然您沒有提到這樣的框架，所以我假設您想要一個普通的JS解決方案。

一種可能性是創建一個空表，並在ajax調用的回調中手動構建缺少的HTML：

<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>

您也可以考慮使用HTML模板 。 在ajax調用的回調中，您可以處理數據以填充模板，然后將所需的任意行追加到表中：

<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>

利用模板的一種更有趣的方法可能是使用模板引擎。 這是使用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>

最后，如果您可以控制ajax調用返回的數據，那么您也可以采用老式的方式，只返回HTML而不是JSON數組。

至於CSS樣式，您需要確保CSS規則以適用於所生成代碼的方式編寫。 它們將自動使用，而無需重新加載頁面。

如果您需要對表行進行進一步的操作，即添加事件偵聽器，則最好將它們設置在表元素上，然后檢查事件目標。 這樣，您可以操作表內容，而無需刪除和重新添加任何事件偵聽器。