DataTables: Uncaught TypeError: Cannot read property 'defaults' of undefined

Question

When using the Bootstrap integration for DataTables, I see the following error in the console:

Uncaught TypeError: Cannot read property 'defaults' of undefined (dataTables.bootstrap.js:20)

This causes the pagination controls to not have styles on them.

I can see that in the factory initialization, the following code needs to run:

factory( jQuery, jQuery.fn.dataTable );

However, jQuery.fn.dataTable is returning undefined.

Answer 1

The problem is that dataTable is not defined at the point you are calling this method.

Ensure that you are loading the .js files in the correct order:

<script src="/Scripts/jquery.dataTables.js"></script>
<script src="/Scripts/dataTables.bootstrap.js"></script>