jQuery DataTables: Common JavaScript console errors

• TypeError: $(…).DataTable is not a function
• TypeError: aData is undefined
• TypeError: f is undefined
• TypeError: Cannot read property ‘length’ of undefined
• TypeError: headerCells[i] is undefined
• TypeError: n[m] is undefined
• TypeError: Cannot read property ‘style’ of undefined
• TypeError: Cannot set property ‘nTf’ of undefined
• TypeError: Cannot read property ‘mData’ of undefined
• TypeError: col is undefined

TypeError: $(…).DataTable is not a function

Cause

• jQuery DataTables library is missing
• jQuery library is loaded after jQuery DataTables
• Multiple versions of jQuery library is loaded

Solution

Include only one version of jQuery library version 1.7 or newer before jQuery DataTables.

TypeError: aData is undefined

Cause

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.

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

{ 
   "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.

TypeError: f is undefined

See the following errors for a possible cause and solution:

• TypeError: aData is undefined

TypeError: Cannot read property ‘length’ of undefined

See the following errors for a possible cause and solution:

• TypeError: aData is undefined

TypeError: headerCells[i] is undefined

TypeError: n[m] is undefined

Cause

• Number of th elements in the table header or footer differs from number of columns in the table body or defined using columns option.
• Attribute colspan is used for th element in the table header.
• Incorrect column index specified in columnDefs.targets option.

Solution

• Make sure that number of th elements in the table header or footer matches number of columns defined in the columns option.
• If you use colspan attribute in the table header, make sure you have at least two header rows and one unique th element for each column. See Complex header for more information.
• If you use columnDefs.targets option, make sure that zero-based column index refers to existing columns.

TypeError: Cannot read property ‘style’ of undefined

See the following errors for a possible cause and solution:

• TypeError: headerCells[i] is undefined

TypeError: Cannot set property ‘nTf’ of undefined

Cause

• Number of th elements in the table footer differs from number of th elements in the table header.

Solution

• Make sure that number of th elements in the table footer matches number of th elements in the table header.

TypeError: Cannot read property ‘mData’ of undefined

TypeError: col is undefined

Cause

• Missing table header.
• Number of td elements in the table body differs from number of th elements in the table header.

Solution

• Make sure that your table has a header. See Requirements for more information.
• Make sure that number of td elements in the table footer matches number of th elements in the table header.

You May Also Like

jQuery DataTables: Row selection using checkboxes and Select extension

jQuery DataTables: Row selection using checkboxes

jQuery DataTables: Why click event handler does not work

jQuery DataTables: Alphabetical Search