DataTables error loading ajax source data

Question

I am getting the following error when trying to load DataTables ajax sourced data:

DataTables warning: table id=report-table - Ajax error. For more information about this error, please see http://datatables.net/tn/7

Below is my DataTables html:

<table id="report-table" class="display nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Page ID</th>
            <th>Schema</th>
            <th>Name</th>
            <th>Last Modified</th>
            <th>Last Modified User</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Page ID</th>
            <th>Schema</th>
            <th>Name</th>
            <th>Last Modified</th>
            <th>Last Modified User</th>
        </tr>
    </tfoot>
</table>

Below is my DataTables javascript:

$('#report-table').DataTable({
    "ajax": data,
    "columns": [
        {
            "data": "PageId",
            "orderable": true
        },
        {
            "data": "SchemaName",
            "orderable": false
        },
        {
            "data": "Name",
            "orderable": true
        },
        {
            "data": "LastModified",
            "orderable": true
        },
        {
            "data": "LastModifiedUser",
            "orderable": true
        },
    ],
    "order": [[3, "desc"]]
});

Below is the confirmed json my C# controller is returning for the DataTables ajax data:

{
   "data":[
      {
         "PageId":"foo",
         "SchemaName":"foo",
         "Name":"foo",
         "LastModified":"foo",
         "LastModifiedUser":"foo"
      },
      {
         "PageId":"foo",
         "SchemaName":"foo",
         "Name":"foo",
         "LastModified":"foo",
         "LastModifiedUser":"foo"
      },
      {
         "PageId":"foo",
         "SchemaName":"foo",
         "Name":"foo",
         "LastModified":"foo",
         "LastModifiedUser":"foo"
      }
   ]
}

The error seems to be related to the JSON format, but not sure what is wrong?

EDIT:

Adding full javascript code:

<script>
    $(function () {
        $("button#report-form-submit").click(function () {
            event.preventDefault();
            var data = $("form#report-form").serialize();
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetReportJson", "Report")",
                data: data,
                dataType: 'json',
                beforeSend: function (data) {
                },
                success: function (data) {
                    // Report DataTables Init
                    // ===========================================
                    $('#report-table').DataTable({
                        "ajax": data,
                        "columns": [
                            {
                                "data": "PageId",
                                "orderable": true
                            },
                            {
                                "data": "SchemaName",
                                "orderable": false
                            },
                            {
                                "data": "Name",
                                "orderable": true
                            },
                            {
                                "data": "LastModified",
                                "orderable": true
                            },
                            {
                                "data": "LastModifiedUser",
                                "orderable": true
                            },
                        ],
                        "order": [[3, "desc"]]
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                },
                complete: function (data) {
                }
            });
        });
    });
</script>

Rahul Sharma · Accepted Answer · 2022-03-22 20:06:19Z

Your <script> block should look like this to initialize your data for your Data Tables:

<script>
    $(function () {
        $("button#report-form-submit").click(function () {
            event.preventDefault();
            var data = $("form#report-form").serialize();
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetReportJson", "Report")",
                data: data,
                dataType: "json",
                method: "post",
                beforeSend: function (data) {
                },
                success: function (data) {
                    // Report DataTables Init
                    // ===========================================
                    $('#report-table').DataTable({
                        "data":data,
                        "columns": [
                            {
                                "data": "PageId",
                                "orderable": true
                            },
                            {
                                "data": "SchemaName",
                                "orderable": false
                            },
                            {
                                "data": "Name",
                                "orderable": true
                            },
                            {
                                "data": "LastModified",
                                "orderable": true
                            },
                            {
                                "data": "LastModifiedUser",
                                "orderable": true
                            },
                        ],
                        "order": [[3, "desc"]]
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                },
                complete: function (data) {
                }
            });
        });
    });
</script>

Although each answer provided good examples and feedback I think your answer is the cleanest and will be clear for others. For anyone that might run across this further reference: datatables.net/manual/data.

Ali Al-Omairi · Accepted Answer · 2022-01-31 07:51:42Z

1

the data source should be an array of arrays that contains the data in the tbody say

data = [
["foo","foo","foo","foo","foo"],
["foo","foo","foo","foo","foo"],
["foo","foo","foo","foo","foo"]
];

see the example [https://datatables.net/examples/data_sources/js_array.html][1]

additionally, use data: data.data instead of "ajax" : data

edited Jan 31, 2022 at 7:51

answered Jan 31, 2022 at 7:25

Ali Al-Omairi

212 bronze badges

6 Comments

seanrco Over a year ago

I did notice that, but believe that format worked on other projects just fine. I know I did have to declare the column data for properties. Issue is Json.NET doesn't serialize C# objects as array of array. Is there no other work around if you cannot change format?

Ali Al-Omairi Over a year ago

then you just use data: data.data instead of "ajax" : data

seanrco Over a year ago

Udpated to "data": data.data and no longer getting original error. Now DataTables just displays "No data available in table" after the call. No console errors.

seanrco Over a year ago

"data": data.data returns undefined. Verified my API controller response is returning json: "[{\"PageId\":\"foo\",\"SchemaName\":\"foo\",\"Name\":\"foo\",\"LastModified\":\"foo\",\"LastModifiedUser\":\"foo\"}]"

seanrco Over a year ago

@Young Shun Using and understanding the data processing logic (datatables.net/manual/data) helped solved my original error. I am running into a separate issue now and which I will branch to a new question. Thanks for all your help!

|

Yong Shun · Accepted Answer · 2022-01-31 11:16:24Z

0

As your JSON response is an object but not an array, specify the ajax to get the JsonResponse.data as below:

"ajax": {
    "url": /* Your Get Data API url */,
    "dataSrc": function (json) {
        return json.data;
    },
},

OR

"ajax": {
    "url": /* Your Get Data API url */,
    "dataSrc": "data"
},

JQuery answer

Updated: Change from json.data to data as Post Owner changed requirement.

data: data

$.ajax({
    type: "POST",
    url: "@Url.Action("GetReportJson", "Report")",
    data: data,
    dataType: 'json',
    beforeSend: function (data) {
    },
    success: function (data) {
        // Report DataTables Init
        // ===========================================
        $('#report-table').DataTable({
            "data": data,  
            ...  // Remaining DataTable configurations
        });
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    },
    complete: function (data) {
    }
});

Output

Reference

ajax - DataTables.net

edited Jan 31, 2022 at 11:16

answered Jan 31, 2022 at 7:30

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

3 Comments

seanrco Over a year ago

I should have clarified the data is within jquery ajax success: function (data) callback. Editing post with full javascript code.

Yong Shun Over a year ago

Hi, done update my answer. Try to use data.

seanrco Over a year ago

Thanks for all your help! While your updated edit in the answer is the same as the answer provided by Rahul Sharma I accepted that one as the answer since it was very clean and clear (for future refence for anyone). Just wanted to say definitely wasn't me who downvoted your answer and not sure why it was. You have been very helpful and appreciative.

Collectives™ on Stack Overflow

DataTables error loading ajax source data

3 Answers 3

1 Comment

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related