DataTables: Cannot read property 'length' of undefined

Question

I understand this a popular issue, and I have read all the similar questions here on Stack Overflow and other sites (including the datatables website).

To clarify, I

Answer 1

CAUSE

This errors TypeError: Cannot read property 'length' of undefined usually means that jQuery DataTables cannot find the data in the response to the Ajax request.

By default jQuery DataTables expects the data to be in one of the formats shown below. Error occurs because data is returned in the format other than default.

Array of arrays

{ 
   "data": [
      [
         "Tiger Nixon",
         "System Architect",
         "$320,800",
         "2011/04/25",
         "Edinburgh",
         "5421"
      ]
   ]
}

Array of objects

{ 
   "data": [
      {
         "name": "Tiger Nixon",
         "position": "System Architect",
         "salary": "$320,800",
         "start_date": "2011/04/25",
         "office": "Edinburgh",
         "extn": "5421"
      }
   ]
}

SOLUTION

Use default format or use ajax.dataSrc option to define data property containing table data in Ajax response (data by default).

See Data array location for more information.

LINKS

See jQuery DataTables: Common JavaScript console errors for more details.

Answer 2

It can happen when your view property name and name inside column section of data table is not matching . Make sure that property name and column data name are matching

Answer 3

Try as follows the return must be d, not d.data

 ajax: {
      "url": "xx/xxx/xxx",
      "type": "GET",
      "error": function (e) {
      },
      "dataSrc": function (d) {
         return d
      }
      },

Answer 4

If you are using ajax as a function remember it expects JSON data to be returned to it, with the parameters set.

$('#example').dataTable({
    "ajax" : function (data, callback, settings) {
        callback({
            data: [...],
            recordsTotal: 40,
            recordsFiltered: 40}
            ));
    }
})

Answer 5

OK, thanks all for the help.

However the problem was much easier than that.

All I need to do is to fix my JSON to assign the array, to an attribute called data, as following.

{
  "data": [{
    "name_en": "hello",
    "phone": "55555555",
    "email": "a.shouman",
    "facebook": "https:\/\/www.facebook.com"
  }, ...]
}

Answer 6

While the above answers describe the situation well, while troubleshooting the issue check also that browser really gets the format DataTables expects. There maybe other reasons not to get the data. For example, if the user does not have access to the data URL and gets some HTML instead. Or the remote system has some unfortunate "fix-ups" in place. Network tab in the browser's Debug tools helps.