Javascript 通过变量中的json数据在js中创建datatable？

现在我遇到了一个问题。我想使用ajax通过使用来自sqlserver数据库的数据来显示datatable。当前状态是我使用ajax调用Handler.ashx来连接sql server并将数据转换为json（使用newtonsoft.json）。在ajax中，所有json数据都已从Handler.ashx接收并存储在变量“msg”中，该变量可以成功显示在页面上。我想把这个“msg”放到一个数据表中，但一直失败。我尝试了几乎所有的在线方法来设置datatable，但仍然给出了不同的错误。我想在js中创建一个datatable并填写我的json数据。但结果要么为空，要么表中没有可用数据

下面是代码和json数据

js:

json数据（大小取决于搜索条件，表列应包含“ID”、“Festival”等，但不包含“virtualTable”）：

解决方案

使用以下代码初始化表：

$('#eventtable').dataTable({
   data: msg.virtualTable,
   columns: [
      { data: "ID" },
      { data: "FESTIVAL" },
      { data: "SUBURB" },
      { data: "POSTCODE" },
      { data: "WEBSITE" },
      { data: "DESCRIPTION" }
   ]
});

演示

---

请参阅以获取代码和演示。

因为您得到了一个JSON作为响应，所以我会尝试将其转换为JSON对象，获取virtualTable部分，即它是JSON中的一组记录，并将其转换为数组以将其添加到我的表中

$(document).ready(function () {
    $("#eventsButton").click(function () {
        $.ajax({
            type: "POST",
            url: "../Handler.ashx",
            //  dataType: "json",
            data: { postcode: $("#eventsPostcodeTextbox").val() },
            success: function (msg) {
                 var jdata = $.parseJSON(msg);
                 jdata = jdata.virtualTable;
                 if (jdata.length != 0) {
                     var array_data = [];
                     var temp_array = [];
                     $(jdata).each(function(key, value) {
                           temp_array = [];
                           temp_array = [value.ID,
                                        value.FESTIVAL,
                                        value.SUBURB,
                                        value.POSTCODE,
                                        value.WEBSITE,
                                        value.DESCRIPTION
                                    ];
                            array_data[array_data.length] = temp_array;

                      });
                      $('#eventtable').dataTable().fnAddData(array_data);
                      $('#eventtable').dataTable().fnDraw();
                 },
              error: function (data) {
                    alert("Server error");
              }

---

还是不行。无法填写表格。但是谢谢你的回答。@郭东荣，你看到控制台有错误吗？请在

success

中添加

console.log（msg）

并发布结果。在0x800a139e中的第2行10673列引发异常-JavaScript运行时错误：在0x800a139e中的第2行10898列引发SyntaxError异常-JavaScript运行时错误：在第2行引发SyntaxError异常，0x800a139e中的第10673列-JavaScript运行时错误：在0x800a139e中的第2行第10898列引发了SyntaxError异常-JavaScript运行时错误：SyntaxErrories，有一些错误！！但是当我发出警报（msg）时，json数据是正常的。刷新页面以查看可能在F12工具打开之前发生的消息。HTML1415:意外字符：U+002D连字符负（-）index.aspx，第69行字符59 SEC7111:HTTPS安全性被index.aspxHi Manuel破坏，它在$（'#eventtable'）.dataTable（）.fnAddData（array#U data）行上给出了一个错误；0x800a01b6-JavaScript运行时错误：对象不支持属性或方法“dataTable”，我在页面上添加了cdn.datatables.net/1.10.9/js/jquery.datatables.js“>。您使用的是什么版本的datatables？我使用的是v1.9.4。如果您使用的是最新版本，他们会使用rows.add（）而不是fnAddData（）更改API。检查有关行的datatables文档。添加（）：您好，我尝试使用v1.9.4，但在创建dataTable（）时仍然出现错误。

$('#eventtable').dataTable({
   data: msg.virtualTable,
   columns: [
      { data: "ID" },
      { data: "FESTIVAL" },
      { data: "SUBURB" },
      { data: "POSTCODE" },
      { data: "WEBSITE" },
      { data: "DESCRIPTION" }
   ]
});

$(document).ready(function () {
    $("#eventsButton").click(function () {
        $.ajax({
            type: "POST",
            url: "../Handler.ashx",
            //  dataType: "json",
            data: { postcode: $("#eventsPostcodeTextbox").val() },
            success: function (msg) {
                 var jdata = $.parseJSON(msg);
                 jdata = jdata.virtualTable;
                 if (jdata.length != 0) {
                     var array_data = [];
                     var temp_array = [];
                     $(jdata).each(function(key, value) {
                           temp_array = [];
                           temp_array = [value.ID,
                                        value.FESTIVAL,
                                        value.SUBURB,
                                        value.POSTCODE,
                                        value.WEBSITE,
                                        value.DESCRIPTION
                                    ];
                            array_data[array_data.length] = temp_array;

                      });
                      $('#eventtable').dataTable().fnAddData(array_data);
                      $('#eventtable').dataTable().fnDraw();
                 },
              error: function (data) {
                    alert("Server error");
              }