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

问题:

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 :

      
     
         
Name
                     
Position
                     
Office
                     
Age
                     
Start date
                     
Salary
                 
Name
                     
Position
                     
Office
                     
Age
                     
Start date
                     
Salary
                 
     
   

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 ?

回答1:

You need to load jQuery before you load any jQuery-related code such as jQuery DataTables, see below:

Also, for production version it's recommended to load minified version (ending with .min.js instead).

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

回答2:

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

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

回答3:

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

回答4:

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.

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

Solution use $.noConflict();

回答5:

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

回答6:

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

Hope it will save your time

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

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

Result :-

文章来源: TypeError: $(…).DataTable is not a function