TypeError: $ (…) .DataTable не является функцией

90

Я пытаюсь работать с jQuery Datatable JS для своего проекта по этой ссылке.

Я скачал полную библиотеку из того же источника. Кажется, все примеры, приведенные в пакете, работают нормально, но когда я пытаюсь включить их в свой WebForms, CSS, JS вообще не работают.

Вот что я сделал: 

<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 jquery css asp.net datatables Abhishek Ghosh
источник
Whatever the code I have written was perfectly fine, but I also got this same error. After long analysis, I just restarted my PC as I didn't restart since last 7 days. Then, my code started working.
Ashok kumar
@Ashokkumar: you got lucky probably!
Abhishek Ghosh

Ответы:

130

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.

Gyrocode.com
источник
45

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>
Ichorville
источник
8
The $.noConflict() call in the method was the key for me. Thanks.
jrebs
36

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

Basheer AL-MOMANI
источник
Actually, I commented jquery.min.js within _Layout.cshtml. However, what really worked for me is putting @RenderSection("scripts", required: false) at the very bottom after all <scripts></scripts> elements.
muhammad tayyab
thanks a lot, your answer ended 4 hours of installing and reinstalling jquery datatables! I have a question though: what If I needed jQuery in _Layout.cshtml and needed datatables in myView.cshtml, what shall I do since not mentioning jQuery in myView.cshtml will cause "jQuery is not defined" ?
Hamza Dahmoun
19

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>
Manoj Patil
источник
using jquery with laravel with Blade as my templating engine...Surprisingly this is the only way it worked for me - Of course you know developers...When it works you stop searching!
daniel Warui
noConflict() worked for me. I guess I had some other version of jQuery installed.
Aaron
10

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

enter image description here

Hitesh Sahu
источник
I was able to do this without the "export table buttons" script calls. Good stuff.
Mark
7

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

tenstormavi
источник
A potential issue to achieve "TypeError: $(…).DataTable is not a function" since Datatables started providing a pick-your-own download builder is that you select jquery in the download but also already have it on your page.
Vanquished Wombat
Just to be clear - this error is thrown from OTHER sources as well. I had them in the right order and was not using two jQuerys. Just in case some other poor soul comes along.... When it works DataTables is wonderful but it is way to flaky for my liking (about an hour in to getting another ****** installation to work!
BeNice
2

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,
          });

        });
muhammad tayyab
источник
1

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

Mike Volmar
источник
0

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();
});
Tech Yogesh
источник
0

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

Agath
источник
0 
// you can get the Jquery's librairies online with adding  those two rows in your page

 <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
Carmel Nkesh
источник
0

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.

Daniel Herrera
источник