TypeError DataTable is not a function

Question

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       lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head runat  server  gt       lt title gt  lt  title gt       lt link href  css jquery dataTables css  rel  stylesheet  type  text css    gt   lt  head gt   lt body gt       lt form id  form1  runat  server  gt       lt div gt           lt table id  myTable  class  display  cellspacing  0  width  100   gt               lt thead gt                   lt tr gt                       lt th gt Name lt  th gt                       lt th gt Position lt  th gt                       lt th gt Office lt  th gt                       lt th gt Age lt  th gt                       lt th gt Start date lt  th gt                       lt th gt Salary lt  th gt                   lt  tr gt               lt  thead gt               lt tfoot gt                   lt tr gt                       lt th gt Name lt  th gt                       lt th gt Position lt  th gt                       lt th gt Office lt  th gt                       lt th gt Age lt  th gt                       lt th gt Start date lt  th gt                       lt th gt Salary lt  th gt                   lt  tr gt               lt  tfoot gt               lt tbody gt                  lt  -- table body -- gt               lt  tbody gt           lt  table gt       lt  div gt       lt script src  js jquery dataTables js  type  text javascript  gt  lt  script gt       lt script src  js jquery js  type  text javascript  gt  lt  script gt       lt script type  text javascript  gt            document  ready function                      myTable   DataTable                     lt  script gt       lt  form gt   lt  body gt   lt  html gt    My file structure for the JS and CSS in my Solution looks as follows       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

User · Answer

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 :-

User · Answer

This worked for me  But make sure to load the jquery js before the preferred dataTable js file  Cheers    lt script type  text javascript  src    Scripts jquery js  gt  lt  script gt   lt script type  text javascript  src    Scripts data-table jquery dataTables js  gt  lt  script gt     lt script gt   document  ready function            noConflict        var table        your selector   DataTable        lt  script gt

User · Answer

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

User · Answer

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

User · Answer

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   lt script src    scripts jquery-1 10 2 js  gt  lt  script gt    lt  --  region datatables files -- gt   lt link rel  stylesheet  type  text css  href    cdn datatables net 1 10 12 css jquery dataTables min css    gt   lt script src    cdn datatables net 1 10 12 js jquery dataTables min js  gt  lt  script gt   lt  --  endregion -- gt    Hope this help you even if don t use ASP NET MVC

User · Answer

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  lt script gt  lt  script gt  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

User · Answer

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

User · Answer

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    lt script src  js jquery min js  type  text javascript  gt  lt  script gt   lt script src  js jquery dataTables min js  type  text javascript  gt  lt  script gt    See jQuery DataTables  Common JavaScript console errors for more information on this and other common console errors

User · Answer

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      lt script src  js jquery js  type  text javascript  gt  lt  script gt   lt script src  js jquery dataTables js  type  text javascript  gt  lt  script gt   lt script gt    noConflict    jQuery  document   ready function                myTable   DataTable           Code that uses other library s   can follow here   lt  script gt

User · Answer

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

User · Answer

you can get the Jquery s librairies online with adding  those two rows in your page    lt script type  quot text javascript quot   src  quot  https   cdn datatables net 1 10 13 js jquery dataTables min js quot  gt  lt  script gt     lt link rel  quot stylesheet quot  href  quot https   cdn datatables net 1 10 13 css jquery dataTables min css quot  gt

User · Answer

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

[javascript] TypeError: $(...).DataTable is not a function

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to asp.net

Examples related to datatables