CODEWITHSUNDEEP
javascriptjqueryjsondatatables
Patricia
Patricia

Reputation: 5089

jQuery Datatable Uncaught TypeError: Cannot read property 'length' of undefined

I see this is a popular question. I'm posting my question because I've tried to investigate my issue with others on SO to no avail.

------------------I'm using the legacy jquery datatable---------------------

I'm seeing inconsistent behavior. I have two datatables that are the same in every way except each is communicating with a different controller. One populates perfectly and the other gives me this error in the jQuery code.

enter image description here

I am getting the json data but the _fnGetObjectDataFn( oSettings.sAjaxDataProp )(json) is setting aData to undefined! Say what? Here is the json data:

enter image description here

To be sure the issue is not with the incorrect number of columns, I've minimized my table to be only one column. Here's the javaScript for the popup table view:

initBuildingsTable = function () {

    $('#selectableAssetTable').dataTable({
        "bPaginate": false,
        "bProcessing": true,
        "bAutoWidth": true,
        "aoColumns": [
            { "mDataProp": "SiteName", "bSortable": true },
        ],
        "aoColumnDefs": [
        { "mDataProp": null, "sDefaultContent": " ", "aTargets": [-1] }
        ],
        "sDom": '<"top">rt<"bottom"><"clear">',
        "oLanguage": {
            "sEmptyTable": "No data found."
        },
        "sAjaxSource": $.baseURL("api/selfservice/getsites"),
        "fnServerData": function (sSource, aoData, fnCallback) {
            $.ajax({
                url: sSource, // Do not add the base to this.  It should already be present
                type: "GET",
                dataType: "json",
                success: fnCallback,
                complete: function () {
                    alert("show me the data!")
                }
            });
        }
    });
}

Here is the HTML for the table:

<table id="selectableAssetTable" style="width: 100%; ">
    <thead>
        <tr>
             <th>Site Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Here is the DTO for the data returning from the controller:

public class SiteDTO
{
    public decimal SiteId { get; set; }
    public string SiteName { get; set; }
    public string Address { get; set; }
    public string Contact { get; set; }
}

Upvotes: 2

Views: 7104

Answers (1)

Niladri
Niladri

Reputation: 5962

you can see oSettings.sAjaxDataProp = "aaData" in the watch window, so you should be looking for an Object named "aaData" to iterate through. But you are using "aData" which is by default undefined.

Upvotes: 1

Related Questions