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

[stilney]

I get the following error in the console when I try to use DataTables

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

I ran the following code to setup dataTables
gem 'jquery-datatables-rails', '~> 3.3.0'
bundle install
$ rails generate jquery:datatables:install
$ rails generate jquery:datatables:install bootstrap3
$ rails generate jquery:datatables:install responsive

I restarted the rails server, and added this code.

//my_javascript.js
$(document).ready(function(){
  $('#test-table').DataTable({
        responsive: true
    });
});

//my_erb_file.erb
 <table class="display" id="test-table">
          <thead>
          <tr>
            <th>Name</th>
            <th>Job</th>
            <th>Start date</th>
            <th>Location</th>
            <th>Desk Location</th>
            <th>Manager</th>
            <th>Status</th>
          </tr>
          </thead>
          <tbody>
              <tr class="options">
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td> 
              </tr>
          </tbody>
        </table>

[Shwetakale]

Could you paste content of your application.js file here. It seems to be datatable is not loaded.

[stilney]

This is my application.js file

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require_tree .

[MichaelDorkhom]

Any fix? I'm having the same issue

[Shwetakale]

@stilney @MichaelDorkhom It seems to be ok. I have similar configuration and it is working properly. Can you please check jquery console and see if there is any error before this or can you push sample application to reproduce this error?

[utkarshrai003]

I am also facing the same Issue while calling dataTable(). Also, I have checked properly that Jquery is loaded priorily. The error is ->

Uncaught TypeError: $(...).dataTable is not a function(…)

@stilney Were you able to find a workaround for this ?

[utkarshrai003]

I solved it. The Issue was jQuery was being initialised twice. Once before requiring the datatable and once after it was initialised and all set to work. So it was something like this.

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require tree.

And in the javascript directory, somehow an extra jquery.min.js file was there. So when //= require tree . was executed, Jquery was reinitialized once more and lost all the references to datatables.

Hope this may be useful for someone.

[Divyakalai]

jquery.min.js:2 jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
at HTMLDocument. (http://localhost/Newtheme/clients/clientlist:1012:20)
at l (http://localhost/Newtheme/assets/theme/plugins/jquery/jquery.min.js:2:29375)
at c (http://localhost/Newtheme/assets/theme/plugins/jquery/jquery.min.js:2:29677) undefined
w.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument. (clientlist:1012)
at l (jquery.min.js:2)
at c (jquery.min.js:2)

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

admin lte 3 datatable not working for me... any one pls help me