Adding JSON data to DataTable

Question

Hoping someone can access this for me cause I cannot figure it out.

The data is successfully being received, however the data won't load into the table. There's no error message. It just simply won't do it. This worked previously when I used an ajax call within the DataTable, but when I move the Ajax call outside of the DataTable creation then it does not work.

Example JSON data:

{
    "data":[
        {
            "Id": 1,
            "Name": "Fred"
        },
        {
            "Id": 2,
            "Name": "Tommy"
        }
    ]
}

Function call to get JSON:

function getJSON() {
    $.ajax({
        url: "Home/GetList",
        type: "GET",
        datatype: "json"
    }).done(function(data) {
        drawDataTable('Table', data);
    });
}

Drawing the DataTable

function drawDataTable(divId, data) {
    var table = $('#' + divId).DataTable({
        data: data,
        dataSrc: "",
        columnDefs: [
            { "targets": [0], "data": "Id" },
            { "targets": [1], "data": "Name" }
        ]
    });
    return table;
}

I then send this large array of data (1000 array elements) to my Datatable function via function drawDataTable(divId, data)

And within that DataTable function I use:

data: data,
dataSrc: ""

I have also tried removing the dataSrc and also making it dataSrc: "data" but neither worked.

What DataTable are you using? Can you share a working example to show this problem? — Andrew L
– Andrew L, Commented Oct 12, 2018 at 16:14
There's to little code here to point definitively to a problem, although my guess is that you're requesting the info from your database, then the table gets drawn (before the data gets back from the data base, so nothing to show in the table), then the data arrives back. Make sure you are not drawing the table until the data is available to be used. — TJBlackman
– TJBlackman, Commented Oct 12, 2018 at 16:14
@TJBlackman that's what I'm thinking too. That the table is being drawn before the data is done being retrieved. However, take a look at my function I added to the post. I only call this drawDataTable upon the Ajax call being done? — Dom
– Dom, Commented Oct 12, 2018 at 16:22
@TJBlackman I also verified that I have the data before creating the datatable being doing a console.log on the data parameter in the drawDataTable function. Thus the data is there for the table to use. — Dom
– Dom, Commented Oct 12, 2018 at 16:27
You said you've tried dataSrc: "data", but that's the string "data". Try instead using the actual data variable: dataSrc: data — TJBlackman
– TJBlackman, Commented Oct 12, 2018 at 16:32

seth_007 · Accepted Answer · 2018-10-12 17:18:09Z

2

I think you missed the structure of JSON, please try data.data

 function drawDataTable(divId, data) {
        var table = $('#' + divId).DataTable({
            data: data.data, //updated here
            dataSrc: "",
            columnDefs: [
                { "targets": [0], "data": "Id" },
                { "targets": [1], "data": "Name" }
            ]
        });
        return table;
    }

answered Oct 12, 2018 at 17:18

seth_007

384 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dom Over a year ago

thank you for your reply! How did you figure this out? The DataTables website has examples with my exact same JSON example but they didn't even use data: data.data

Dom Over a year ago

I was also able to remove dataSrc: "" and have it still work. I suppose that's not necessary unless your JSON data has a different parent node other than data

davidkonrad Over a year ago

Yes, data is the default prop DT is looking for, if nothing else specified.

Al Masum Fahim · Accepted Answer · 2018-10-12 17:06:22Z

0

Make sure you are writing your code inside this function

$(document).ready(function() { 
// your code
}

because anything written outside this, might not work properly, specially when you are working with dataTables.

Also, you can write this code in the following way ( if this helps )

$(document).ready(function() {
   function drawDataTable(divId,data) {
   var t = $('#'+ divId).DataTable();
   var dataObj = JSON.parse(data);
   dataObj.forEach(element => {
      t.row.add([
            element.Id,
            element.name
         ]).draw(false)
    });
 }})

edited Oct 12, 2018 at 17:06

answered Oct 12, 2018 at 16:38

Al Masum Fahim

1132 silver badges7 bronze badges

1 Comment

Dom Over a year ago

I apologize for that typo. I changed some of the code to have it not replicate what I am working with in reality. I changed string values that can be interchanged. Nice catch though.

Collectives™ on Stack Overflow

Adding JSON data to DataTable

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related