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（）函数是为此而制作的。

当您执行诸如添加或删除行，表格的排序，过滤或分页特征希望DataTables更新显示以反映这些更改。这个为此提供了功能。

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

是的，有很多电话转到您的后端是不好的做法。如果您拥有对后端的控制权，那么您应该致力于对其进行优化。例如：当您提供公司列表时，它将返回所有指定公司的统计信息。

当前，对于互联网连接速度较慢的用户（例如，移动用户。

此外，此解决方案无法很好地扩展。想象一下您的网站正在腾飞，成百上千的人正在同时使用它。这意味着要进行100 *个后续公司调用，而在建议的情况下，将是对后端的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。

jQuery数据表：循环添加数据库中的行

1 个答案: