DataTables 1.10 notes

datatable.1.10.notes.md

Table loaded callback

$('#example').dataTable( {
    "initComplete": function( settings, json ) {
        console.log( "Finished loading" );
    }
} );

ERRORS

Uncaught TypeError: Cannot read property 'style' of undefined

Probably defined too many columns in the JavaScript than there are in the HTML

Uncaught TypeError: Cannot read property 'mData' of undefined

Probably defined more elements in the HTML than in the columns property

<table id="example">
    <thead>
    <tr>
        <th>name</th>
        <th>position</th>
        <th>office</th>
        <th>age</th>
        <th>start_date</th>
        <th>salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> <!-- Cell doesn't have associated data in JavaScript -->
    </tr>
    </tbody>
</table>

$(document).ready(function() {
    $('#example').DataTable({
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "age" },
            { "data": "start_date" },
            { "data": "salary" },
            { "defaultContent": '' } // Possible to specify empty
        ]
    });
} );

https://datatables.net/reference/option/columns.data

Uncaught TypeError: Cannot read property 'length' of undefined

Caused by not specifying the dataSrc attribute of the ajax property if server JSON doesn't follow the normal structure

• Check dataSrc is INSIDE ajax

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "dataSrc": ""
  }
} );

https://datatables.net/reference/option/ajax.dataSrc