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

Create datatable in js via json data in a variable?

本文关键字：js 创建 数据表 数据 json 变量      更新时间：2023-09-26

现在我遇到了一个问题。我想使用ajax通过使用来自sql server数据库的数据来显示一个数据表。当前的状态是我已经使用ajax调用一个Handler。Ashx连接SQL服务器并将数据转换为json(使用newtonsoft.json)。在ajax中，所有json数据都是从Handler接收到的。并存储在一个变量"msg"中，该变量可以成功地显示在页面上。我想把这个"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." } ] }

既然你得到一个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");
              }
<

解决方案/strong>

使用下面的代码初始化表:

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

相关文章：