Do I have the right JSON format?

DanJ210

Hello all. I'm having such a hard time getting data to refresh in a DataTable. I can use ASP.NET Razor to generate my table and then turn that into a DataTable, but I need to refresh that data and everytime I refresh that table it redraws the table which resets ordering and the position a person is on, on the page. So I thought that the .ajax.reload() would be a solution. It's just that I'm having such a hard time trying to hook up the JSON data I'm getting, to the table.

I posted a URL of a screenshot I took of the JSON data being returned from the ajax call. Is this format correct to use with DataTables? I'm unsure the exact code I would need to use to hook that into the DataTable. Any ideas or help with the code I would need for the JSON data being returned as shown in the screenshot would be forever appreciated.

var dataTable = $('#wTable').DataTable({
            "ajax": "/Home/returnJson",
            "dataSrc": function (data) { (data) }
        });

I posted a comment with the image URL and I explained why but I don't see that comment. So here's the URL.

[https://1drv.ms/i/s!AlnGeQSYLUVap-ZzR3KMzS0oL2x3eQ](https://1drv.ms/i/s!AlnGeQSYLUVap-ZzR3KMzS0oL2x3eQ "https://1drv.ms/i/s!AlnGeQSYLUVap-ZzR3KMzS0oL2x3eQ")

allan

The dataSrc property should be inside an ajax object (see ajax.dataSrc). Also, if your server is returning a plain array, you can simply set it to be an empty string - see this example.

For example you might use:

var dataTable = $("#wTable").DataTable({
  ajax: {
    url: "/Home/returnJson",
    dataSrc: ""
  }
});

Allan

DanJ210

Thanks Allan for helping with getting this account back up. I've tried the above but still can't get data to show up. If I do this below, I can get it to work. I basically create a global variable and make an ajax call to assign the results to the variable using JSON.parse(); on the results. Then the DataTable() code below that works and data is displayed. But I need this data constantly updating and I'm trying to do the same thing I've emulated below, in the one DataTable call so I can do .reload();

var globalVariable;
        var test = $.ajax({
            type: "GET",
            async: false,
            url: "/Home/returnJson"
        }).done(function (result) {
            globalVariable = JSON.parse(result);
            });
var dataTable = $('#wTable').DataTable({
            "ajax": "/Home/returnJson",
            "data": globalVariable,
            "columns": [
                { data: "Attributes.Client" },
                { data: "Attributes.ver" },
                { data: "LastCommunication" },
                { data: "TelephonyStatistics.BY" },
                { data: "WorkItemsGiven" },
                { data: "WorkItemsReturned" }
            ]
        });

DanJ210

So if the above scenario works, then shouldn't this scenario below work? I'm doing an ajax call to that same controller action and getting the same data and in the "dataSrc" property I'm using a function on the data received to do JSON.parse() which I'm doing above... but this method loads no data, just stays on loading. From what I understand is that this should be the same thing as above? Except with this way I can .reload() with ease and recollect the data... Am I missing something?

var dataTable = $('#wTable').DataTable({ "ajax": "/Home/returnJson", "dataSrc": function (data) { return JSON.parse(data); }, "columns": [ { data: "Attributes.Client" }, { data: "Attributes.ver" }, { data: "LastCommunication" }, { data: "TelephonyStatistics.BY" }, { data: "WorkItemsGiven" }, { data: "WorkItemsReturned" } ] });

DanJ210

I'm sorry I'm trying to figure out how to correctly format the code.

DanJ210

I really messed this thread up. I was trying to edit the posts using markdown to make everything into one but I'm posting multiples. My apologies.

DanJ210

After researching what you said about the dataSrc property being inside the ajax call... Maybe that's what I'm missing here. I'll try that and report back.

kthorngren

FYI, when you are posting a comment the instructions at the bottom state:
"To highlight code, please use triple back ticks (```) on new lines before and after the code block."

Here is your last code:

var dataTable = $('#wTable').DataTable({ 
"ajax": "/Home/returnJson", 
"dataSrc": function (data) { return JSON.parse(data); }, 
"columns": [ { data: "Attributes.Client" }, 
  { data: "Attributes.ver" }, 
  { data: "LastCommunication" }, 
  { data: "TelephonyStatistics.BY" }, 
  { data: "WorkItemsGiven" }, 
  { data: "WorkItemsReturned" } ] 
});

Allan stated:
"The dataSrc property should be inside an ajax object". You haven't done that yet. Let's start with a more simpler JS:

var dataTable = $('#wTable').DataTable({ 
"ajax": { "url": "/Home/returnJson", 
              "dataSrc": ""
            }, 
"columns": [ { data: "Attributes.Client" }, 
  { data: "Attributes.ver" }, 
  { data: "LastCommunication" }, 
  { data: "TelephonyStatistics.BY" }, 
  { data: "WorkItemsGiven" }, 
  { data: "WorkItemsReturned" } ] 
});

If this doesn't work then use the Datatables Debugger to collect diag info and post the provided URL.

Kevin

allan

Formatting: The triple backticks you had were right - they just need to be on their own lines.

Try this:

var dataTable = $("#wTable").DataTable({
  ajax: {
    url: "/Home/returnJson",
    dataSrc: ""
  },
  columns: [
    { data: "Attributes.Client" },
    { data: "Attributes.ver" },
    { data: "LastCommunication" },
    { data: "TelephonyStatistics.BY" },
    { data: "WorkItemsGiven" },
    { data: "WorkItemsReturned" }
  ]
});

Allan

DanJ210

Thank you so much for all your help Allen. That above suggestion didn't work and when I alert the typeof(data being returned from the controller method) it states it as a string... So idk if that's correctly being returned. BUT, what did work was this below:

`var dataTable = $('#wTable').DataTable({
            "ajax": {
                url: "/Home/returnJson",
                dataSrc: function (data) { return JSON.parse(data) }
            },
            columns: [
                { data: "Attributes.Client" },
                { data: "Attributes.ver" },
                { data: "LastCommunication" },
                { data: "TelephonyStatistics.BY" },
                { data: "WorkItemsGiven" },
                { data: "WorkItemsReturned" }
            ]
        });
        setInterval(function () {`

DanJ210

Also. Thank you for the help with understanding how to correctly format these posts. The above example that I showed did work and data is displaying from the ajax result and better yet.. It's updating without redrawing the table!!! Very excellent.

I have to do a little more testing to make sure that everything is working the way I need it but so far it seems that things are. So your answer did solve my issue. I was going by examples and I must've missed the ajax call having its own brackets, not sure how I missed that.

Thank you,
Daniel

allan

Good to hear you've got it working now :-)

Allan