DataTable shows nothing after ajax data returned.

dstephani

This datatable always returns "No data available in table" (using v 1.10.7 and MVC). Table columns display fine.

---- code from CSHTML page -----

<script type="text/javascript">
    var tblRptData;
    $(document).ready(function () {
        startRptData();
    });
</script>

----- function from js page -----

function startRptData() {
    x = $("#DataTableColumnsJSON").val();
    columns = JSON.parse(x);
    vid = $("#ViewID").val();
    sid = $("#ScanID").val()

    $.ajax({
        "type": "GET",
        "data": { vid: vid, sid: sid },
        "url": "/Report/GetReportData",
        "datatype": "json",
        "traditional": true
    }).done(function (data) {
        tblRptData = $("#tblRptData").DataTable({
            "data": data.data,
            "datatype": "json",
            "destroy": true,
            "columns": columns
        })
    })
}

----- "columns" variable contains json -----

[
    {"title":"Scan_DTM","data":"Scan_DTM","type":"datetime2","className":"text-left"},
    {"title":"Server_NME","data":"Server_NME","type":"nvarchar","className":"text-left"},
    {"title":"Full_NME","data":"Full_NME","type":"nvarchar","className":"text-left"},
    {"title":"Instance_NME","data":"Instance_NME","type":"nvarchar","className":"text-left"},
    {"title":"Database_NME","data":"Database_NME","type":"nvarchar","className":"text-left"},
    {"title":"Counter_NME","data":"Counter_NME","type":"nvarchar","className":"text-left"},
    {"title":"Value_CTR","data":"Value_CTR","type":"bigint","className":"text-right"},
    {"title":"Value_NBR","data":"Value_NBR","type":"bigint","className":"text-right"}
]

----- "data" returned from ajax call -----

{
  "data": [
    {
      "Scan_DTM": "2019-11-10T21:00:04.23",
      "Server_NME": "SOMESERVER.ACME.COM",
      "Full_NME": "SOMESERVER.ACME.COM",
      "Instance_NME": null,
      "Database_NME": "AdventureWorks",
      "Counter_NME": "Log Flush Wait Time",
      "Value_CTR": 4,
      "Value_NBR": 272696576
    },
    {
      "Scan_DTM": "2019-11-10T21:00:04.23",
      "Server_NME": "SOMESERVER.ACME.COM",
      "Full_NME": "SOMESERVER.ACME.COM",
      "Instance_NME": null,
      "Database_NME": "AdventureWorks",
      "Counter_NME": "Log Flush Write Time (ms)",
      "Value_CTR": 4,
      "Value_NBR": 272696576
    },
    {
      "Scan_DTM": "2019-11-10T21:00:04.23",
      "Server_NME": "SOMESERVER.ACME.COM",
      "Full_NME": "SOMESERVER.ACME.COM",
      "Instance_NME": null,
      "Database_NME": "AdventureWorks",
      "Counter_NME": "Log Growths",
      "Value_CTR": 0,
      "Value_NBR": 65792
    }
  ]
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

You might need to use JSON.parse(data) in the .done() function, for example:

}).done(function (data) {
    data = JSON.parse(data);
    tblRptData = $("#tblRptData").DataTable({
        "data": data.data,
        "datatype": "json",
        "destroy": true,
        "columns": columns
    })
})

Kevin

dstephani

Thanks, Kevin, for the recommendation. However, I get the same, unfortunate results.

colin

It works here, so the data is good. Could you try it in a success() function, rather than done(), it shouldn't make a different, but worth trying.

Colin

dstephani

Thank you both for the suggestions. I will mark Kevin's answer as correct. However, in addition to Kevins suggestion to using JSON.parse(data), the data also needed to be changed slightly. Each of the items in the array needed square braces "[]" verses braces "{}".