No data available in table - datatables jquery issue

Question

I have a jquery-datatables that I am populating from a method in C#.

The C# method 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"}

Looks like data.d is already a javascript object, not a JSON string, especially with dataType:'json' - try changing return $.parseJSON(data.d); to just return data.d — fdomn-m
– fdomn-m, Commented Jun 9, 2021 at 10:03
@freedomn-m that sorted it thank you! If you want to put that as an answer I can mark it as correct? :) — hlh3406
– hlh3406, Commented Jun 9, 2021 at 10:13

fdomn-m · Accepted Answer · 2021-06-09 10:26:12Z

1

The issue is this part:

        dataType: "json",
        dataSrc: function (data) {
            console.log(data.d);
            return $.parseJSON(data.d);
        }

in dataSrc callback, data will already be a javascript object, not a JSON string. Calling $.parseJSON(object) will generate an error, which it looks like datatables is catching (and ignoring, which is bad practice).

Thus giving an unrelated error message that there's no data, rather than that the data processing failed.

Change return $.parseJSON(data.d); to just

return data.d;

answered Jun 9, 2021 at 10:26

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

No data available in table - datatables jquery issue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related