javascript - Jquery 数据表 : add rows from database in a loop

Question

我有一个页面在页面加载时对数据库进行 Ajax 调用。它返回用户正在关注的公司列表，然后遍历列表槽并对每个公司进行另一个 Ajax 调用，以获取有关它们的一些统计信息。然后将统计信息添加到一个数据表中，该数据表被绘制了很多次:

var table = $("#example").DataTable();

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "../json/stats.aspx?t=followed-companies",
            dataType: "json",
            success: function (data) {
                for (i = 0; i < Object.keys(data).length; i++) {
                    $.ajax({
                        type: "POST",
                        async: true,
                        contentType: "application/json; charset=utf-8",
                        url: "../json/stats.aspx?t=company-stats" + "&n=" + data[i]
                    }).done(function (dataSecondary) {

       var stringtest = "<tr><td>" + dataSecondary.Stats1 + "</td>" +
                            "<td>" + dataSecondary.Stats2 + "</td>" +
                            "<td>" + dataSecondary.Stats3 + "</td>" +
                            "<td>" + '<button type="button" id="delete" class="btn btn-danger btn-xs dt-delete">' + "Delete" + "</td></tr>";
                        table.row.add($(stringtest)).draw();
                    });
                }
            },
            error: function (xhr) {
                console.log('error', xhr);
            }
        });

我没有太多编程经验，但我知道这需要很长时间才能加载，因此性能很差。

主要问题是，我可以使用 table.draw();在我在该循环中添加行之后？ 我想这可以节省一些时间。我试图在循环结束后绘制表格，但表格显示没有要显示的数据。

第二个问题，这是不好的做法吗(主要是那些带有循环和 SQL 查询的嵌套 Ajax 调用)，我应该尝试统一尽可能多的 SQL 查询吗？

Answer 1

JSFiddle example - Get Post Data using ajax and display in .dataTable()

主要问题是，我可以使用 table.draw();在我在该循环中添加行之后？

是的，你可以。如果您查看 datatables 的文档您会看到 draw() 函数就是为此而设计的。

When you perform an action such as adding or deleting a row, changing the sorting, filtering or paging characteristics of the table you'll want DataTables to update the display to reflect these changes. This function is provided for that purpose.

第二个问题，这是不好的做法吗(主要是那些带有循环和 SQL 查询的嵌套 Ajax 调用)，我应该尝试统一尽可能多的 SQL 查询吗？

是的，让很多电话转到您的后端是不好的做法。如果您可以控制后端，则应该着眼于优化它。例如:当您提供公司列表时，它将返回所有指定公司的统计信息。

目前，对于那些互联网连接速度较慢的人来说，这尤其是一种糟糕的体验，例如移动用户。

此外，此解决方案的扩展性不佳。想象一下您的网站正在起飞，并且有数百人同时使用它。这意味着 100 * amount-of-followed-companies 调用，而建议是对后端调用 100 次以获取相同的数据。

您是否也考虑过使用 ajax sourced data 生成表格的可能性？ .

更新:
至于不起作用的 draw() 函数。根据文档，您提供了数据结构，而无需自己实际使用 html 构建表格。使用返回的数据，其中 columnNameX 是您指定的列的名称。在您的 .done() 中尝试一下。

var data = {
  columnName1: dataSecondary.Stats1
  columnName2: dataSecondary.Stats2 
  columnName3: dataSecondary.Stats3
}

table.row.add(data).draw();

至于生成按钮。我之前没有与他们合作过，但您可以找到更多关于他们的信息 here .