No data in table but datasrc shows data

No data in table but datasrc shows data

hlhhlh Posts: 6Questions: 1Answers: 0

Hi I have a datatable that I am populating from a method in C#. The datatable returns some json which I have validated, however my columns never get populated and instead I get a message that says "No data available in table." I'm completely stuck so hoping someone can help!

```var table = $('#example').DataTable({
            ajax: {
                url: pageUrl,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                dataSrc: function (data) {
                    console.log(data.d);
                    return $.parseJSON(data.d);
                }
            },
            "pageLength": 50,
            fixedHeader: true,
            responsive: true,
            "columns": [
                {
                    "data": "key",
                    "render": function (data, type, row, meta) {
                        if (type === 'display') {
                            data = '<a href="/software/details.aspx?id=' + data + '">' + data + '</a>';
                        }

                        return data;
                    } },
                { "data": "summary" },
                { "data": "created" },
                { "data": "updated" },
                { "data": "Status" },
                { "data": "priority" },
                { "data": "reporter" },
                { "data": "assignee" }
            ],
            autoWidth: false,
            "columnDefs": [
                { "width": "50%", "targets": 0 },
                { "width": "5%", "targets": 1 },
                { "width": "5%", "targets": 2 },
                { "width": "5%", "targets": 3 },
                { "width": "5%", "targets": 4 },
                { "width": "5%", "targets": 5 }
            ],
            "order": [[1, 'asc']],
            "success": fnsuccesscallback,
            "error": fnerrorcallback
        });

        function fnsuccesscallback(data) {
            alert(data.d);

        }

        function fnerrorcallback(result) {
            alert(result.statusText);
        }```

And this is the data in the console.log output:

{"summary":"External Change Request Form: tester - 19/1/2021","created":"2021-01-19T15:32:02+00:00","updated":"2021-06-03T08:59:17+01:00","status":"To Do","key":"ITS-4711","assignee":"Bob","priority":"Low","reporter":"Dave"}

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 14,084Questions: 25Answers: 3,322
    edited June 9

    Is that the full response? Datatables expects an array of rows even if its just one row. Your data is not in an array. See the ajax docs for more details.

    kevin

  • hlhhlh Posts: 6Questions: 1Answers: 0

    Hi, I altered two things;

    The datasrc was converting it to json and it was already converted prior to passing it back, so I changed it to return data without parsing it:

    dataSrc: function (data) { console.log(data.d); return (data.d); }
    

    Changed the formatting of the data that I was pulling back. Example below.

    However I'm getting an error that says

    "Requested unknown parameter 'Key' for row 0, column 0."
    

    And then it display 982 blank rows!

    { "data": [ {"Summary":"Create lists of useful fields for Tableau", "Created":"11/06/2020 13:03:36", "Updated":"18/01/2021 07:48:56", "Status":"Done", "Key":"PGT-2766", "Assignee":"Jane Doe", "Priority":"Lowest", "reporter":"Dave" },{"Summary":"test", "Created":"13/01/2021 14:30:04", "Updated":"13/01/2021 14:30:06", "Status":"To Do", "Key":"PGT-4622", "Assignee":"admin_user", "Priority":"Low", "reporter":"Dave" },{"Summary":"Review Programme queues", "Created":"15/02/2021 14:32:21", "Updated":"08/03/2021 08:08:12", "Status":"In Progress", "Key":"PGT-5185", "Assignee":"Jane Doe", "Priority":"High", "reporter":"Dave" },{"Summary":"External Change Form: Bob - 19/1/2021", "Created":"19/01/2021 15:32:02", "Updated":"03/06/2021 08:59:17", "Status":"To Do", "Key":"PGT-4711", "Assignee":"admin_user", "Priority":"Low", "reporter":"Dave" } ] }
    
  • kthorngrenkthorngren Posts: 14,084Questions: 25Answers: 3,322
    edited June 9

    You have "data": "key", but your JSON response has "Key":"PGT-2766". Change it to "data": "Key". Javascript is case sensitive. Make sure the others match the case as well.

    Kevin

  • hlhhlh Posts: 6Questions: 1Answers: 0

    @kthorngren thanks changed it, but I still get the same problem! :(

    Left my data the same and changed the datatable columns to look at this:

    "columns": [
                 { "data": "Key" },
                { "data": "Summary" },
                { "data": "Created" },
                { "data": "Updated" },
                { "data": "Status" },
                { "data": "Priority" },
                { "data": "reporter" },
                { "data": "Assignee" }
            ],
    

    However I'm still getting the same error about Key and also a lot of empty rows! :(

  • kthorngrenkthorngren Posts: 14,084Questions: 25Answers: 3,322

    if data.d is { "data": [ {"Summa..... then maybe you need to return data.d.data. Also make sure the array is an array not a string.

    Kevin

  • hlhhlh Posts: 6Questions: 1Answers: 0
    edited June 10

    @kthorngren thanks for your help so far!

    I was returning a string but I've now changed that over to an object in C# and when I output it to the console I get this:

    When I try and return data.d.data in the dataSrc I get an undefined.

    I'm still getting the same issue as before with tons of empty rows!

    I've also tried this which hasn't worked either :(

    return (JSON.stringify(data.d)); 
    OR 
    return (JSON.stringify(data));
    
  • kthorngrenkthorngren Posts: 14,084Questions: 25Answers: 3,322

    The escaped quotes (\") suggest that the data is JSON encapsulated twice by the server. See if Colin's answer in this thread helps.

    Kevin

  • hlhhlh Posts: 6Questions: 1Answers: 0

    @kthorngren Thank you!!! That looks to have got me one step closer woo hoo!!!

    So by doing this:

    dataSrc: function (data) {
                        console.log(JSON.parse(data.d));
                        return (JSON.parse(data.d));
                    }
    

    I now get this!

    However the datatable now says no data available! :(

    I've double checked and my column names are correctly capitalised and match up with the names being pulled back in that array.

    Do I need to reference my columns differently? I've tried data: and data.d just in case that made a difference.

     "columns": [
                    { "data.d": "key" },
                    { "data": "summary" },
    
  • kthorngrenkthorngren Posts: 14,084Questions: 25Answers: 3,322
    Answer ✓

    The option is columns.data to define the columns. { "data.d": "key" } won't work. Looking at the examples in the ajax.dataSrc docs the last example shows using a function. Its returning json.data which looks like this by default {"data": [...]}. Based on that I think your function should look something like this:

    dataSrc: function (data) {
                        console.log(JSON.parse(data.d));
                        var tableData = JSON.parse(data.d);
                        return tableData.data;
                    }
    

    Kevin

  • hlhhlh Posts: 6Questions: 1Answers: 0

    @kthorngren that has worked!!!! Thank you so much - you have been a phenomenal help!!! :) :) :) :)

Sign In or Register to comment.