提取数据后如何加载表

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规则以适用于所生成代码的方式编写。 它们将自动使用，而无需重新加载页面。

如果您需要对表行进行进一步的操作，即添加事件侦听器，则最好将它们设置在表元素上，然后检查事件目标。 这样，您可以操作表内容，而无需删除和重新添加任何事件侦听器。