CODEWITHSUNDEEP
javascriptjquerydatatable
Philip Tenn
Philip Tenn

Reputation: 6073

jQuery DataTable Not a Function

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>

Upvotes: 0

Views: 397

Answers (3)

James Douglas
James Douglas

Reputation: 3446

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?

Upvotes: 1

Sujeet Kumar
Sujeet Kumar

Reputation: 56

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

Upvotes: 1

brk
brk

Reputation: 50291

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>

Upvotes: 1

Related Questions