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

Javascript Jquery Css asp.net Datatables

Javascript Problem Overview

I am trying to work with jQuery's Datatable JS for my project from this link.

I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to incorporate them in my WebForms,the CSS,JS do not work at all.

Here is what I have done :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="myTable" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
               <!-- table body -->
            </tbody>
        </table>
    </div>
    <script src="js/jquery.dataTables.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>
    </form>
</body>
</html>

My file structure for the JS and CSS in my Solution looks as follows :

File structure of JS and CSS in solution

I have added all the necessary JS and CSS references as shown in the manual. Still the rendering isn't as expected. There is no CSS and even the JS doesn't work.

Also in the console i get the following errors:

ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function

I have still not bound any dynamic data here (like within a repeater or so) still it is not working.

Can someone please guide me in the right direction for this problem ?

Javascript Solutions

Solution 1 - Javascript

CAUSE

There could be multiple reasons for this error.

jQuery DataTables library is missing.
jQuery library is loaded after jQuery DataTables.
Multiple versions of jQuery library is loaded.

SOLUTION

Include only one version of jQuery library version 1.7 or newer before jQuery DataTables.

For example:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>

See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.

Solution 2 - Javascript

This worked for me. But make sure to load the jquery.js before the preferred dataTable.js file. Cheers!

<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>

 <script>$(document).ready(function () {
    $.noConflict();
    var table = $('# your selector').DataTable();
});</script>

Solution 3 - Javascript

I got this error because I found out that I referenced jQuery twice.

The first time: on the master page (_Layout.cshtml) in ASP.NET MVC, and then again on one current page so I commented out the one on the master page.

If you are using ASP.NET MVC this snippet could help you

@*@Scripts.Render("~/bundles/jquery")*@//comment this line 
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

and in the current page I added these lines

<script src="~/scripts/jquery-1.10.2.js"></script>

<!-- #region datatables files -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- #endregion -->

Hope this help you even if don't use ASP.NET MVC

Solution 4 - Javascript

if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.

Sometimes it could be issue with older version (or not stable) of JQuery files

Solution use $.noConflict();

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
    $('#myTable').DataTable();
});
// Code that uses other library's $ can follow here.
</script>

Solution 5 - Javascript

Here is the complete set of JS and CSS required for the export table plugin to work perfectly.

Hope it will save your time

   <!--Import jQuery before export.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


    <!--Data Table-->
    <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>

    <!--Export table buttons-->
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
    <script type="text/javascript"  src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>

<!--Export table button CSS-->

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">

javascript to add export buttons on the table with id = tbl

  $('#tbl').DataTable({
                        dom: 'Bfrtip',
                        buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                        ]
                    });

Result :-

Solution 6 - Javascript

Same error occurs when working with DataTables in a Laravel project. Even if the following solutions are tried, the error still remains:

making sure jQuery is included
include jQuery before including the DataTables
making sure only one version of jQuery is added

In order to remove the error, after making sure the above conditions are fulfilled, add "defer" to the tag which includes the DataTables. For example,

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

Solution 7 - Javascript

There can be two reasons for that error:

First

You are loding jQuery.DataTables.js before jquery.js so for that :-

You need to load `jQuery.js` before you load `jQuery.DataTables.js` Second

You are using two versions of jQuery.js on the same page so for that :-

Try to use the higher version and make sure both links have same version of jQuery

Solution 8 - Javascript

Honestly, this took hours to get this fixed. Finally only one thing worked a reconfirmation to solution provided by "Basheer AL-MOMANI". Which is just putting statement

   @RenderSection("scripts", required: false)

within _Layout.cshtml file after all <script></script> elements and also commenting the jquery script in the same file. Secondly, I had to add

 $.noConflict();

within jquery function call at another *.cshtml file as:

 $(document).readyfunction () {
          $.noConflict();
          $("#example1").DataTable();
         $('#example2').DataTable({
              "paging": true,
              "lengthChange": false,
              "searching": false,
              "ordering": true,
              "info": true,
              "autoWidth": false,
          });

        });

Solution 9 - Javascript

I tried many things but my solution was adding "defer" after html script that you included datatables.

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer></script>

Solution 10 - Javascript

I know its late Buy can help someone

This could also happen if you don't add $('#myTable').DataTable(); inside the document.ready

So instead of this

$('#myTable').DataTable();

Try This

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

Solution 11 - Javascript

I ran into this error also. For whatever reason I had originally coded

var table = $('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

This would not throw the error sometimes and other times it would. By changing code to

$('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

Error appears to have stopped

Solution 12 - Javascript

I have Added defer to the data table jquery library reference. Now it is working for me.

<script src="~/Scripts/jquery.dataTables.min.js" defer></script>

Solution 13 - Javascript

In my case the solution was to delete cookies from the browser.

Solution 14 - Javascript

Having the same issue in Flask, I had already a template that loaded JQuery, Popper and Bootstrap. I was extending that template into other template that I was using as a base to load the page that had the table.

For some reason in Flask apparently the files in the outer template load before the files in the tables above in the hierarchy (the ones you are extending) so JQuery was loading before the DataTables files causing the issue.

I had to create another template where I run all my imports of JS CDNs in the same place, that solved the issue.

Solution 15 - Javascript

Sometimes it happens that the script (initializing of datatable) is embedded in a general page template, so if one of the pages that actually does not have any table and you did not import the jquery related files for datatable, you face this error, since the general initialization still is looking for that. (This was in my case)

Solution: Is to wrap the initialization of datatable inside a codition that check presence of the library before that:

Here is practical example of it.

if (typeof jQuery.fn.DataTable != "undefined"){
	$('#accordionExample table').DataTable( {
		"pageLength": 5,
		"info": false,
		"order": [[ 1, "desc" ]]
	} );
}

Solution 16 - Javascript

This may also happen if you write Datatable instead of DataTable. (DataTable T must be capital). this is a beginner's mistake.

$(document).ready(function() {
            $('#category-table').DataTable({
                // Your Code
            });

Content Type	Original Author	Original Content on Stackoverflow
Question	Abhishek Ghosh	View Question on Stackoverflow
Solution 1 - Javascript	Gyrocode.com	View Answer on Stackoverflow
Solution 2 - Javascript	Ichorville	View Answer on Stackoverflow
Solution 3 - Javascript	Basheer AL-MOMANI	View Answer on Stackoverflow
Solution 4 - Javascript	Manoj Patil	View Answer on Stackoverflow
Solution 5 - Javascript	Hitesh Sahu	View Answer on Stackoverflow
Solution 6 - Javascript	Atif Bashir	View Answer on Stackoverflow
Solution 7 - Javascript	tenstormavi	View Answer on Stackoverflow
Solution 8 - Javascript	muhammad tayyab	View Answer on Stackoverflow
Solution 9 - Javascript	Burak Tanrıkulu	View Answer on Stackoverflow
Solution 10 - Javascript	Tech Yogesh	View Answer on Stackoverflow
Solution 11 - Javascript	Mike Volmar	View Answer on Stackoverflow
Solution 12 - Javascript	Anshu Verma	View Answer on Stackoverflow
Solution 13 - Javascript	Agath	View Answer on Stackoverflow
Solution 14 - Javascript	Daniel Herrera	View Answer on Stackoverflow
Solution 15 - Javascript	Naser Nikzad	View Answer on Stackoverflow
Solution 16 - Javascript	Devang Baroliya	View Answer on Stackoverflow

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

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

CAUSE

SOLUTION

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

There can be two reasons for that error:

First

You need to load `jQuery.js` before you load `jQuery.DataTables.js` Second

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Solution 14 - Javascript

Solution 15 - Javascript

Solution 16 - Javascript

using brackets with javascript import syntax

laravel 5 : Class 'input' not found

Attributions

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

CAUSE

SOLUTION

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

There can be two reasons for that error:

First

You need to load jQuery.js before you load jQuery.DataTables.js Second

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Solution 14 - Javascript

Solution 15 - Javascript

Solution 16 - Javascript

using brackets with javascript import syntax

laravel 5 : Class 'input' not found

Attributions

You need to load `jQuery.js` before you load `jQuery.DataTables.js` Second