CODEWITHSUNDEEP
javascripttwitter-bootstrapdatatables
Ryan Kohn
Ryan Kohn

Reputation: 13509

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

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.

Upvotes: 64

Views: 177672

Answers (4)

Donald
Donald

Reputation: 23

<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"defer</script>

Add Defer to the end of your Script tag, it worked for me (;

Everything needs to be loaded in the correct order (:

Upvotes: 2

Eugene Oca
Eugene Oca

Reputation: 1

var datatable_jquery_script = document.createElement("script");
datatable_jquery_script.src = "vendor/datatables/jquery.dataTables.min.js";
document.body.appendChild(datatable_jquery_script);
setTimeout(function(){
    var datatable_bootstrap_script = document.createElement("script");
    datatable_bootstrap_script.src = "vendor/datatables/dataTables.bootstrap4.min.js";
    document.body.appendChild(datatable_bootstrap_script);
},100);

I used setTimeOut to make sure datatables.min.js loads first. I inspected the waterfall loading of each, bootstrap4.min.js always loads first.

Upvotes: 0

Alan Elias
Alan Elias

Reputation: 41

I got the same error, I'm using laravel 5.4 with webpack, here package.json before:

{
  ...
  ...
  "devDependencies": {
    "jquery": "^1.12.4",
    ...
    ...
  },
  "dependencies": {
    "datatables.net": "^2.1.1",
    ...
    ...
  }
}

I had to move jquery and datatables.net npm packages under one of these "dependencies": {} or "devDependencies": {} in package.json and the error disappeared, after:

{
  ...
  ...
  "devDependencies": {
    "jquery": "^1.12.4",
    "datatables.net": "^2.1.1",
    ...
    ...
  }
}

I hope that helps!

Upvotes: 4

Ryan Kohn
Ryan Kohn

Reputation: 13509

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>

Upvotes: 199

Related Questions