如何使用 AJAX 和 Web 方法将 JSON 对象发送到使用 asp.net 的 jQuery DataTable？

Question

所以我有使用 AJAX 的 jQuery 数据表来调用这种格式的 JSON。

 $(document).ready(function () {

            $('#test').DataTable({
                ajax:{
                    url:"players.json",
                    dataSrc:""
                  },
                columns: [
                    {data: "id"},
                    { data: "player" },
                    { data: "points" },
                    { data: "steals" },
                    { data: "blocks" },
                    { data: "assists" },
                    { data: "MPG" },
                    { data: "shot %" },
                    { data: "3 %" }
                ]


            });
        });

我的 aspx.cs 文件有一个创建 JSON 文件的方法。

[System.Web.Services.WebMethod]
        public static void loadTable()
        {
            NBAPlayerRepository players = new NBAPlayerRepository();
            DataTable dt = players.GetAll();
            var json = dt.ToJson();
            System.IO.File.WriteAllText(@"C:\Users\wheres\Downloads\nbaStats\nbaStats\nbaStats\players.json", json);
        }

JSON 看起来像这样：

[{"id" : "67926aa7-46b7-4418-96db-fc7e5216aac4","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "33.3429985046387"}
,{"id" : "6dc42e0b-8750-463d-a9ef-5a025a27154b","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "343.334014892578"}
,{"id" : "f727130c-5b94-4730-a653-cfb603c73b8a","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "343.334014892578"}
]

但现在我收到此错误“jquery.dataTables.min.js:48 Uncaught TypeError: Cannot read property 'length' of undefined”

编辑：现在一切正常。只需要添加 dataSrc:""

Answer 1

数据表初始化的清理版本

 $(document).ready(function () {

        $('#test').DataTable({
            ajax: {
                url: "players.aspx/loadTable"
            },
            columns: [
               { data: "id" },
               { data: "player" },
               { data: "points" },
               { data: "steals" },
               { data: "blocks" },
               { data: "assists" },
               { data: "MPG" },
               { data: "Shot %" },
               { data: "3 %" },
            ]

    });
});

这似乎是从您的代码中删除了很多东西，所以让我对更改的内容进行一些解释/假设。

假设

• 首先，假设：DataTables 在第一次从表中获取数据时，总是会尝试使用GET 请求，而不是POST，因此请确保您的数据处理代码期望这样。
• 我还假设您并不强烈希望将 Ajax 与初始化分开，而这正是您第一次尝试时决定这样做的原因。如果是这种情况，请告诉我，我会更新代码以匹配它。

说明

您的格式在某些方面不正确，而在其他方面不符合 DataTables 标准，因此此版本应该以更简单的形式完成您尝试执行的大部分操作。您的许多 Ajax 选项是不必要的，因为它们已经是默认值（例如，数据类型为 JSON），这就是它们被删除的原因。

DataTables 的一个优点是您可以在初始化时使用 Ajax 选项，这就是我在这里所做的。您确实丢失了成功和失败回调，但我认为出于调试目的，它们并不是真正必要的，并且有任何额外的代码会增加要调试的东西的数量（我什至在我的大部分最终代码中都没有使用这些回调）。

大多数其他更改主要是不正确的命名法（例如，在列定义中使用data 而不是title。

免责声明

虽然我一般建议这些更改只是为了改进您的代码，但我会确保查看与服务器发送和接收的 JSON 格式。如果您不知道该怎么做，我建议您下载 Fiddler 以“收听”正在发送的 JSON 数据。

如果您的 JSON 有误，那么对页面的任何更改都不会使表格出现。

最后，确保页面上没有 JS 错误。使用浏览器的开发者控制台 (F12) 进行检查。

如果您确实发现任何 JS 错误，请将它们发布在您的问题中。我还建议发布发送到问题的 JSON 数据，以便我们确保格式正确。