TypeError: $ (…) .DataTable bir işlev değil


91

Bu bağlantıdan projem için jQuery'nin Datatable JS'si ile çalışmaya çalışıyorum .

Tüm kütüphaneyi aynı kaynaktan indirdim. Pakette verilen tüm örnekler iyi çalışıyor gibi görünüyor, ancak bunları benim WebFormsCSS'ye dahil etmeye çalıştığımda , JS hiç çalışmıyor.

İşte yaptığım şey:

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

Çözümümdeki JS ve CSS için dosya yapım aşağıdaki gibi görünüyor:

Çözümde JS ve CSS dosya yapısı

Kılavuzda gösterildiği gibi gerekli tüm JS ve CSS referanslarını ekledim. Yine de render beklendiği gibi değil. CSS yok ve JS bile çalışmıyor.

Ayrıca konsolda aşağıdaki hataları alıyorum:

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

Hala burada herhangi bir dinamik veriyi bağlamadım (bir tekrarlayıcı içinde olduğu gibi) hala çalışmıyor.

Birisi bana bu problem için doğru yönde rehberlik edebilir mi?


Yazdığım kod ne olursa olsun gayet iyiydi, ama aynı hatayı da aldım. Uzun bir analizden sonra, son 7 günden beri yeniden başlatmadığım için bilgisayarımı yeniden başlattım. Sonra kodum çalışmaya başladı.
Ashok kumar

@Ashokkumar: Muhtemelen şanslısın!
Abhishek Ghosh

Yanıtlar:


134

SEBEP OLMAK

Bu hatanın birden çok nedeni olabilir.

  • jQuery DataTables kitaplığı eksik.
  • jQuery kitaplığı, jQuery DataTables'dan sonra yüklenir .
  • JQuery kitaplığının birden çok sürümü yüklenir.

ÇÖZÜM

JQuery DataTables'dan önce jQuery kitaplığı 1.7 sürümünün veya daha yeni bir sürümünün yalnızca bir sürümünü ekleyin .

Örneğin:

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

Bkz jQuery DataTable: Yaygın JavaScript konsolu hataları bu ve diğer ortak konsol hatalarıyla ilgili daha fazla bilgi için bkz.


46

Bu benim için çalıştı. Ancak jquery.js'yi tercih edilen dataTable.js dosyasından önce yüklediğinizden emin olun. Şerefe!

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

8
Metoddaki $ .noConflict () çağrısı benim için anahtardı. Teşekkürler.
jrebs

37

Bu hatayı aldım çünkü jQuery'ye iki kez başvurduğumu öğrendim.

İlk kez: _Layout.cshtmlASP.NET MVC'deki ana sayfada ( ) ve ardından tekrar geçerli bir sayfada, böylece ana sayfadaki bir tanesini yorumladım.

ASP.NET MVC kullanıyorsanız bu kod parçası size yardımcı olabilir

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

ve mevcut sayfaya bu satırları ekledim

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

Umarım ASP.NET MVC kullanmasanız bile bu size yardımcı olur


Aslında, _Layout.cshtml içinde jquery.min.js yorumunu yaptım. Ancak, benim için gerçekten işe yarayan şey, @RenderSection'ı ("scripts", gerekli: false) tüm <scripts> </scripts> öğelerinin en altına koymaktı.
muhammad tayyab

çok teşekkürler, cevabınız jquery datatable'larının yüklenmesi ve yeniden yüklenmesi ile 4 saat sona erdi! Yine de bir sorum var: _Layout.cshtml'de jQuery'ye ve myView.cshtml'de gerekli datatable'lara ihtiyacım olsaydı, myView.cshtml'de jQuery'den bahsetmemek "jQuery tanımlanmadı" ya neden olacağından ne yapmalıyım?
Hamza Dahmoun

19

herhangi bir nedenle jQuery'nin iki sürümü yüklenirse (ki bu önerilmez), $.noConflict(true)ikinci sürümden çağrı , genel kapsamlı jQuery değişkenlerini ilk sürümün değişkenlerine döndürür.

Bazen JQuery dosyalarının eski sürümüyle (veya kararlı olmayan) sorun olabilir

Çözüm kullanımı $.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>

Şablon oluşturma motorum olarak Blade ile jquery kullanıyorum ... Şaşırtıcı bir şekilde benim için çalışmasının tek yolu buydu - Elbette geliştiricileri bilirsiniz ... Çalıştığı zaman aramayı bırakırsınız!
daniel Warui

noConflict () benim için çalıştı. Sanırım başka bir jQuery sürümü yükledim.
Aaron

10

Dışa aktarma tablosu eklentisinin mükemmel çalışması için gereken eksiksiz JS ve CSS seti.

Umarım zamanınızı kurtarır

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

id = ile tabloya dışa aktarma düğmeleri eklemek için javascript tbl

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

Sonuç: -

görüntü açıklamasını buraya girin


Bunu "tablo düğmelerini dışa aktar" komut dosyası çağrıları olmadan yapabildim. İyi şeyler.
Mark

7

Bu hatanın iki nedeni olabilir:

İlk

Bunun için daha jQuery.DataTables.jsönce yatıyorsunuz jquery.js: -

Yüklemeden jQuery.jsönce yüklemeniz gerekiyorjQuery.DataTables.js

İkinci

Bunun jQuery.jsiçin aynı sayfada iki sürüm kullanıyorsunuz : -

Daha yüksek sürümü kullanmayı deneyin ve her iki bağlantının da aynı sürümüne sahip olduğundan emin olun. jQuery


"TypeError: $ (…] .DataTable bir işlev değil" elde etmek için olası bir sorun, Datatables kendi indirme oluşturucunuzu seçmeye başladığından beri, indirme sırasında jquery'yi seçmeniz, ancak aynı zamanda sayfanızda zaten bulundurmanızdır.
Vanquished Wombat

Açık olmak gerekirse - bu hata DİĞER kaynaklardan da atılmıştır. Onları doğru sıraya koydum ve iki jQuery kullanmıyordum. Başka bir zavallı ruhun ortaya çıkması ihtimaline karşı .... Çalıştığı zaman DataTables harikadır, ama benim
beğenime

3

Dürüst olmak gerekirse, bunu düzeltmek saatler sürdü. Sonunda tek bir şey, "Basheer AL-MOMANI" tarafından sağlanan çözümün yeniden doğrulanmasında işe yaradı. Bu sadece ifade etmek

   @RenderSection("scripts", required: false)

içindeki _Layout.cshtmldosyaya sonuçta <script></script>elemanları ve aynı zamanda aynı dosyada jquery komut yorumlama. İkinci olarak eklemek zorunda kaldım

 $.noConflict();

jquery işlevi içinde başka bir * .cshtml dosyasında şu şekilde arayın:

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

        });

1

Ben de bu hatayla karşılaştım. Başlangıçta kodlamamın nedeni ne olursa olsun

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

Bu bazen hatayı atmazdı ve bazen de olurdu. Kodu şu şekilde değiştirerek

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

Hata durmuş gibi görünüyor


0

Geç olduğunu biliyorum Satın al birisine yardım edebilir

Bu, $('#myTable').DataTable();içeri eklemezseniz de olabilir .document.ready

Yani bunun yerine

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

Bunu dene

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

0

Benim durumumda çözüm, çerezleri tarayıcıdan silmekti.


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

0

Flask'ta aynı sorunu yaşarken, JQuery, Popper ve Bootstrap'i yükleyen bir şablonum vardı. Bu şablonu, tablonun bulunduğu sayfayı yüklemek için temel olarak kullandığım diğer şablona genişletiyordum.

Flask'ta bazı nedenlerden dolayı, dış şablondaki dosyalar hiyerarşide yukarıdaki tablolarda bulunan dosyalardan önce (sizin genişlettiğiniz) önce yüklenir, bu nedenle JQuery, soruna neden olan DataTables dosyalarından önce yükleniyordu.

JS CDN'lerinin tüm içe aktarımlarını aynı yerde çalıştırdığım ve sorunu çözen başka bir şablon oluşturmam gerekiyordu.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.