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

Question

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

这是代码和json数据的样子。

js:

$(document).ready(function () {
    $("#eventsButton").click(function () {
        $.ajax({
            type: "POST",
            url: "../Handler.ashx",
            //contentType: "application/json",
            data: { postcode: $("#eventsPostcodeTextbox").val() },
            cache: false,
            success: function (msg) {
                //for (var i in msg) {
                //  $("#eventGrid").append(msg[i]);
                //}
                //var jsonStr = JSON.stringify(msg);
                document.getElementById("result").innerHTML = msg;
                $('#eventtable').dataTable({
                    //"paging": false,
                    //"searching": false,
                    //"retrieve": true,
                    //"bProcessing": true,

                    //"data": msg.data,
                    //"datatype": "JSON",
                    //"ajax": "HandlerAll.ashx",
                    //"aaData": JSON.parse(msg),
                    //"ajax":
                    //"dataSrc":virtualTable
                    //"aoColumns": [
                    // { "mData": "ID" },
                    // { "mData": "FESTIVAL" },
                    // { "mData": "SUBURB" },
                    // { "mData": "POSTCODE" },
                    // { "mData": "WEBSITE" },
                    // { "mData": "DESCRIPTION" }
                    // ]
                });
            },
            error: function (data) {
                alert("Server error.");
            }
        })
    });
});

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

{ "virtualTable": [ { "ID": "1", "FESTIVAL": "Antipodes Festival", "SUBURB": "Lonsdale Street, Melbourne", "POSTCODE": "3000", "WEBSITE": "http://www.antipodesfestival.com.au/", "DESCRIPTION": "The greek precinct in melbourne cbd will transform into a huge, free street festival with the hosting of the antipodes lonsdale street festival which will hold sway from 14 february 2015 to 15 february 2015." }, { "ID": "5", "FESTIVAL": "Boite Singers Festival", "SUBURB": "Victoria", "POSTCODE": "3000", "WEBSITE": "http://boite.com.au/index.php", "DESCRIPTION": "The boite singers festival brings you four days of vocal inspiration and sheer fun on the second weekend of january each year." } ] } 

Answer 1

由于您收到 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");
              }

Answer 2

解决方案

使用下面的代码初始化表格：

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

演示

有关代码和演示，请参阅this jsFiddle。