jQuery DataTable Not a Function

Question

I've done a lot of searching and everyone says it is caused by including the DataTable script before jQuery, or double-including jQuery.

However, this is not the case for my code.

I keep getting $(...).DataTable is not a function.

<!DOCTYPE html>   
<html lang="en">   
<head>   
  <meta charset="utf-8">   
  <title>Example of Employee Table with twitter bootstrap</title>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){
            $('#myTable').DataTable();
        });
    </script>
</head>  
<body style="margin:20px auto">  
    <table id="myTable" class="table table-striped" >  
        <thead>  
          <tr>  
            <th>ENO</th>  
            <th>EMPName</th>  
            <th>Country</th>  
            <th>Salary</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>001</td>  
            <td>Anusha</td>  
            <td>India</td>  
            <td>10000</td>  
          </tr>  
          <tr>  
        <td>002</td>  
        <td>Charles</td>  
        <td>United Kingdom</td>  
        <td>28000</td>  
      </tr>  
      <tr>  
        <td>003</td>  
        <td>Sravani</td>  
        <td>Australia</td>  
        <td>7000</td>  
      </tr>  
       <tr>  
        <td>004</td>  
        <td>Amar</td>  
        <td>India</td>  
        <td>18000</td>  
      </tr>  
      <tr>  
        <td>005</td>  
        <td>Lakshmi</td>  
        <td>India</td>  
        <td>12000</td>  
      </tr>  
      <tr>  
        <td>006</td>  
        <td>James</td>  
        <td>Canada</td>  
        <td>50000</td>  
      </tr>  

       <tr>  
        <td>007</td>  
        <td>Ronald</td>  
        <td>US</td>  
        <td>75000</td>  
      </tr>  
      <tr>  
        <td>008</td>  
        <td>Mike</td>  
        <td>Belgium</td>  
        <td>100000</td>  
      </tr>  
    </tbody>  
  </table>  
  </div>
</body>  

</html>

Not familiar with the plugin, but the example on their webpage has a different version of the jQuery: datatables.net/examples/basic_init/zero_configuration.html — Amiga500
– Amiga500, Commented Jun 6, 2017 at 14:54
You say it is giving an error, but your example works fine. Can you post code that does what you say it does? — James Douglas
– James Douglas, Commented Jun 6, 2017 at 15:57
@JamesDouglas We have a self-signed MITM cert here ... that may be causing the problem. — Philip Tenn
– Philip Tenn, Commented Jun 6, 2017 at 16:06

brk · Accepted Answer · 2017-06-06 14:58:09Z

https is secured connection.In your case you are using http in http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js which may be the source of the problem

$(document).ready(function() {
  $('#myTable').DataTable();
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>



<body style="margin:20px auto">
  <table id="myTable" class="table table-striped">
    <thead>
      <tr>
        <th>ENO</th>
        <th>EMPName</th>
        <th>Country</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>Anusha</td>
        <td>India</td>
        <td>10000</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Charles</td>
        <td>United Kingdom</td>
        <td>28000</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Sravani</td>
        <td>Australia</td>
        <td>7000</td>
      </tr>
      <tr>
        <td>004</td>
        <td>Amar</td>
        <td>India</td>
        <td>18000</td>
      </tr>
      <tr>
        <td>005</td>
        <td>Lakshmi</td>
        <td>India</td>
        <td>12000</td>
      </tr>
      <tr>
        <td>006</td>
        <td>James</td>
        <td>Canada</td>
        <td>50000</td>
      </tr>

      <tr>
        <td>007</td>
        <td>Ronald</td>
        <td>US</td>
        <td>75000</td>
      </tr>
      <tr>
        <td>008</td>
        <td>Mike</td>
        <td>Belgium</td>
        <td>100000</td>
      </tr>
    </tbody>
  </table>
  </div>

Thank you. We have a self-signed MITM cert where I work which is probably causing the problem.

Sujeet Kumar · Accepted Answer · 2017-06-06 15:40:25Z

1

@Philip Tenn, I have checked the code with and without https. But I have no any issue with your code, its working fine.

answered Jun 6, 2017 at 15:40

Sujeet Kumar

562 bronze badges

1 Comment

Philip Tenn Over a year ago

Thank you. We have a self-signed MITM cert where I work which is probably causing the problem.

James Douglas · Accepted Answer · 2017-06-06 15:59:57Z

You have a </div> at the end of your table that shouldn't be there, but otherwise your code works fine...

$(document).ready(function(){
  $('#myTable').DataTable();
});

<!DOCTYPE html>   
<html lang="en">   
<head>   
  <meta charset="utf-8">   
  <title>Example of Employee Table with twitter bootstrap</title>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>  
<body style="margin:20px auto">  
    <table id="myTable" class="table table-striped" >  
        <thead>  
          <tr>  
            <th>ENO</th>  
            <th>EMPName</th>  
            <th>Country</th>  
            <th>Salary</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>001</td>  
            <td>Anusha</td>  
            <td>India</td>  
            <td>10000</td>  
          </tr>  
          <tr>  
        <td>002</td>  
        <td>Charles</td>  
        <td>United Kingdom</td>  
        <td>28000</td>  
      </tr>  
      <tr>  
        <td>003</td>  
        <td>Sravani</td>  
        <td>Australia</td>  
        <td>7000</td>  
      </tr>  
       <tr>  
        <td>004</td>  
        <td>Amar</td>  
        <td>India</td>  
        <td>18000</td>  
      </tr>  
      <tr>  
        <td>005</td>  
        <td>Lakshmi</td>  
        <td>India</td>  
        <td>12000</td>  
      </tr>  
      <tr>  
        <td>006</td>  
        <td>James</td>  
        <td>Canada</td>  
        <td>50000</td>  
      </tr>  

       <tr>  
        <td>007</td>  
        <td>Ronald</td>  
        <td>US</td>  
        <td>75000</td>  
      </tr>  
      <tr>  
        <td>008</td>  
        <td>Mike</td>  
        <td>Belgium</td>  
        <td>100000</td>  
      </tr>  
    </tbody>  
  </table>  
</body>  
</html>

Perhaps there is something else on your page that is interfering with it?

Thank you. We have a self-signed MITM cert where I work which is probably causing the problem.

Collectives™ on Stack Overflow

jQuery DataTable Not a Function

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related