TypeError: $ (…) .DataTable nie jest funkcją

90

Próbuję pracować z jQuery Datatable JS dla mojego projektu z tego linku.

Pobrałem całą bibliotekę z tego samego źródła. Wszystkie przykłady podane w pakiecie wydają się działać dobrze, ale kiedy próbuję włączyć je do mojego WebForms, CSS, JS w ogóle nie działają.

Oto, co zrobiłem: 

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

Moja struktura plików dla JS i CSS w moim rozwiązaniu wygląda następująco:

Struktura plików JS i CSS w rozwiązaniu

Dodałem wszystkie niezbędne odniesienia do JS i CSS, jak pokazano w podręczniku. Jednak renderowanie nie jest zgodne z oczekiwaniami. Nie ma CSS, a nawet JS nie działa.

Również w konsoli otrzymuję następujące błędy: 

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

Nadal nie mam tutaj żadnych danych dynamicznych (jak w przypadku repeatera), ale nadal nie działa.

Czy ktoś może poprowadzić mnie we właściwym kierunku w przypadku tego problemu?

javascript jquery css asp.net datatables Abhishek Ghosh
źródło
Niezależnie od napisanego przeze mnie kodu był on w porządku, ale dostałem również ten sam błąd. Po długiej analizie właśnie zrestartowałem komputer, ponieważ nie uruchomiłem go ponownie od ostatnich 7 dni. Wtedy mój kod zaczął działać.
Ashok kumar
@Ashokkumar: prawdopodobnie miałeś szczęście!
Abhishek Ghosh

Odpowiedzi:

130

PRZYCZYNA

Przyczyn tego błędu może być wiele.

  • Brak biblioteki jQuery DataTables.
  • Biblioteka jQuery jest ładowana po jQuery DataTables.
  • Załadowano wiele wersji biblioteki jQuery.

ROZWIĄZANIE

Uwzględnij tylko jedną wersję biblioteki jQuery w wersji 1.7 lub nowszą przed jQuery DataTables.

Na przykład:

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

Zobacz jQuery DataTables: typowe błędy konsoli JavaScript, aby uzyskać więcej informacji na temat tego i innych typowych błędów konsoli.

Gyrocode.com
źródło
45

To zadziałało dla mnie. Ale pamiętaj, aby załadować plik jquery.js przed preferowanym plikiem dataTable.js. Twoje zdrowie!

<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
źródło
8
Wywołanie $ .noConflict () w metodzie było dla mnie kluczem. Dzięki.
jrebs
36

Otrzymałem ten błąd, ponieważ dowiedziałem się, że odwołałem się do jQuery dwukrotnie.

Za pierwszym razem: na stronie wzorcowej ( _Layout.cshtml) w ASP.NET MVC, a następnie ponownie na jednej bieżącej stronie, więc dodałem komentarz do strony wzorcowej.

Jeśli używasz ASP.NET MVC, ten fragment może Ci pomóc

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

i na bieżącej stronie dodałem te linie

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

Mam nadzieję, że to pomoże, nawet jeśli nie używasz ASP.NET MVC

Basheer AL-MOMANI
źródło
Właściwie skomentowałem plik jquery.min.js w _Layout.cshtml. Jednak to, co naprawdę zadziałało, to umieszczenie @RenderSection ("scripts", required: false) na samym dole po wszystkich elementach <scripts> </scripts>.
muhammad tayyab
wielkie dzięki, Twoja odpowiedź zakończyła się 4 godzinami instalacji i ponownej instalacji danych jQuery! Mam jednak pytanie: co jeśli potrzebowałem jQuery w _Layout.cshtml i potrzebowałem danych w myView.cshtml, co mam zrobić, skoro nie wspomnienie jQuery w myView.cshtml spowoduje, że "jQuery nie jest zdefiniowane"?
Hamza Dahmoun
19

jeśli z jakiegoś powodu załadowane zostaną dwie wersje jQuery (co nie jest zalecane), wywołanie $.noConflict(true)z drugiej wersji zwróci zmienne jQuery o zasięgu globalnym do tych z pierwszej wersji.

Czasami może to być problem ze starszą wersją (lub niestabilną) plików JQuery

Zastosowanie rozwiązania $.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
źródło
używając jquery z laravel z Blade jako moim silnikiem szablonów ... Zaskakujące jest to, że tylko w ten sposób zadziałało dla mnie - oczywiście znasz programistów ... Kiedy to działa, przestajesz szukać!
daniel Warui
noConflict () działało dla mnie. Wydaje mi się, że miałem zainstalowaną inną wersję jQuery.
Aaron
10

Oto pełny zestaw JS i CSS wymaganych do perfekcyjnego działania wtyczki tabeli eksportu.

Mam nadzieję, że pozwoli to zaoszczędzić czas

   <!--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, aby dodać przyciski eksportu w tabeli z id = tbl

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

Wynik: -

wprowadź opis obrazu tutaj

Hitesh Sahu
źródło
Byłem w stanie to zrobić bez wywołań skryptu „przyciski eksportu tabeli”. Dobry towar.
Mark
7

Mogą być dwa powody tego błędu:

Pierwszy

Składasz mieszkanie jQuery.DataTables.jswcześniej jquery.js, aby: -

Musisz załadować jQuery.jsprzed załadowaniemjQuery.DataTables.js

druga

Używasz dwóch wersji jQuery.jsna tej samej stronie, więc w tym celu: -

Spróbuj użyć wyższej wersji i upewnij się, że oba łącza mają tę samą wersję jQuery

tenstormavi
źródło
Potencjalnym problemem związanym z osiągnięciem „TypeError: $ (…) .DataTable nie jest funkcja”, odkąd Datatables zaczęło udostępniać własny kreator pobierania, polega na tym, że wybierasz jquery w pobieraniu, ale masz go już na swojej stronie.
Vanquished Wombat
Dla jasności - ten błąd jest również wyrzucany z INNYCH źródeł. Miałem je we właściwej kolejności i nie używałem dwóch jQuerys. Na wypadek gdyby pojawiła się inna biedna dusza ... Kiedy to działa, DataTables jest cudowna, ale według moich upodobań jest to sposób na niestabilność (około godziny do uruchomienia kolejnej ****** instalacji!
BeNice
2

Szczerze mówiąc, naprawienie tego zajęło kilka godzin. Ostatecznie tylko jedna rzecz sprawdziła się jako potwierdzenie rozwiązania dostarczonego przez firmę „Basheer AL-MOMANI”. To jest tylko oświadczenie

   @RenderSection("scripts", required: false)

wewnątrz _Layout.cshtmlpliku po wszystkich <script></script>elementach, a także komentowanie skryptu jquery w tym samym pliku. Po drugie, musiałem dodać

 $.noConflict();

w ramach funkcji jquery wywołaj inny plik * .cshtml jako:

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

        });
muhammad tayyab
źródło
1

Napotkałem również ten błąd. Z jakiegokolwiek powodu, który pierwotnie zakodowałem

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

To nie powodowało czasami błędu, a innym razem tak. Zmieniając kod na

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

Wygląda na to, że błąd ustał

Mike Volmar
źródło
0

Wiem, że późno Kup może komuś pomóc

Może się to również zdarzyć, jeśli nie dodasz $('#myTable').DataTable();wewnątrzdocument.ready

Więc zamiast tego

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

Spróbuj tego

$(document).ready(function() {
    $('#myTable').DataTable();
});
Tech Yogesh
źródło
0

W moim przypadku rozwiązaniem było usunięcie plików cookies z przeglądarki.

Agath
źródło
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
źródło
0

Mając ten sam problem w Flasku, miałem już szablon, który ładował JQuery, Popper i Bootstrap. Rozszerzyłem ten szablon na inny szablon, którego używałem jako podstawy do załadowania strony, na której była tabela.

Z jakiegoś powodu w Flasku najwyraźniej pliki w szablonie zewnętrznym są ładowane przed plikami w tabelach powyżej w hierarchii (te, które rozszerzasz), więc JQuery ładował się przed plikami DataTables powodującymi problem.

Musiałem stworzyć inny szablon, w którym wszystkie moje importy CDN JS uruchamiam w tym samym miejscu, co rozwiązało problem.

Daniel Herrera
źródło