TypeError: $ (…) .DataTable bukan sebuah fungsi

90

Saya mencoba bekerja dengan JS Datatable jQuery untuk proyek saya dari tautan ini .

Saya mengunduh perpustakaan lengkap dari sumber yang sama. Semua contoh yang diberikan dalam paket tampaknya berfungsi dengan baik, tetapi ketika saya mencoba memasukkannya ke dalam saya WebForms, CSS, JS tidak berfungsi sama sekali.

Inilah yang telah saya lakukan: 

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

Struktur file saya untuk JS dan CSS di Solusi saya terlihat sebagai berikut:

Struktur file JS dan CSS dalam solusi

Saya telah menambahkan semua referensi JS dan CSS yang diperlukan seperti yang ditunjukkan di manual. Namun renderingnya tidak seperti yang diharapkan. Tidak ada CSS dan bahkan JS tidak berfungsi.

Juga di konsol saya mendapatkan kesalahan berikut: 

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

Saya masih belum mengikat data dinamis apa pun di sini (seperti di dalam repeater atau lebih) masih tidak berfungsi.

Bisakah seseorang membimbing saya ke arah yang benar untuk masalah ini?

javascript jquery css asp.net datatables Abhishek Ghosh
sumber
Apapun kode yang saya tulis baik-baik saja, tetapi saya juga mendapat kesalahan yang sama. Setelah analisis yang lama, saya baru saja me-restart PC saya karena saya tidak me-restart sejak 7 hari terakhir. Kemudian, kode saya mulai berfungsi.
Ashok kumar
@Ashokkumar: Anda mungkin beruntung!
Abhishek Ghosh

Jawaban:

130

SEBAB

Mungkin ada beberapa alasan untuk kesalahan ini.

  • Perpustakaan jQuery DataTables hilang.
  • Perpustakaan jQuery dimuat setelah jQuery DataTables.
  • Beberapa versi pustaka jQuery dimuat.

LARUTAN

Sertakan hanya satu versi pustaka jQuery versi 1.7 atau yang lebih baru sebelum jQuery DataTables.

Sebagai contoh:

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

Lihat jQuery DataTables: Kesalahan konsol JavaScript umum untuk informasi lebih lanjut tentang ini dan kesalahan konsol umum lainnya.

Gyrocode.com
sumber
45

Ini berhasil untuk saya. Namun pastikan untuk memuat jquery.js sebelum file dataTable.js pilihan. Bersulang!

<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
sumber
8
Panggilan $ .noConflict () dalam metode ini adalah kunci bagi saya. Terima kasih.
jrebs
36

Saya mendapat kesalahan ini karena saya menemukan bahwa saya mereferensikan jQuery dua kali.

Pertama kali: di halaman master ( _Layout.cshtml) di ASP.NET MVC, dan kemudian lagi di satu halaman saat ini jadi saya mengomentari halaman master.

Jika Anda menggunakan ASP.NET MVC potongan ini dapat membantu Anda

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

dan di halaman saat ini saya menambahkan baris ini

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

Semoga ini membantu Anda bahkan jika tidak menggunakan ASP.NET MVC

Basheer AL-MOMANI
sumber
Sebenarnya, saya mengomentari jquery.min.js dalam _Layout.cshtml. Namun, yang benar-benar berhasil bagi saya adalah meletakkan @RenderSection ("scripts", required: false) di bagian paling bawah setelah semua elemen <scripts> </scripts>.
muhammad tayyab
terima kasih banyak, jawaban Anda berakhir 4 jam menginstal dan menginstal ulang jquery datatables! Saya punya pertanyaan: bagaimana jika saya membutuhkan jQuery di _Layout.cshtml dan membutuhkan datatables di myView.cshtml, apa yang harus saya lakukan karena tidak menyebutkan jQuery di myView.cshtml akan menyebabkan "jQuery tidak ditentukan"?
Hamza Dahmoun
19

jika karena alasan tertentu, dua versi jQuery dimuat (yang tidak disarankan), memanggil $.noConflict(true)dari versi kedua akan mengembalikan variabel jQuery yang dicakup secara global ke versi pertama.

Terkadang itu bisa menjadi masalah dengan versi yang lebih lama (atau tidak stabil) dari file JQuery

Penggunaan solusi $.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
sumber
menggunakan jquery dengan laravel dengan Blade sebagai mesin templating saya ... Anehnya ini adalah satu-satunya cara kerjanya untuk saya - Tentu saja Anda tahu pengembang ... Saat berhasil, Anda berhenti mencari!
daniel Warui
noConflict () berhasil untuk saya. Saya kira saya memiliki beberapa versi jQuery yang diinstal.
Aaron
10

Berikut adalah set lengkap JS dan CSS yang diperlukan agar plugin tabel ekspor berfungsi dengan sempurna.

Semoga ini akan menghemat waktu Anda

   <!--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 untuk menambahkan tombol ekspor pada tabel dengan id = tbl

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

Hasil: -

masukkan deskripsi gambar di sini

Hitesh Sahu
sumber
Saya dapat melakukan ini tanpa panggilan skrip "tombol tabel ekspor". Barang bagus.
Tandai
7

Ada dua alasan untuk kesalahan itu:

Pertama

Anda menginap jQuery.DataTables.jssebelumnya jquery.jsuntuk itu: -

Anda harus memuat jQuery.jssebelum memuatjQuery.DataTables.js

Kedua

Anda menggunakan dua versi jQuery.jspada halaman yang sama sehingga untuk itu: -

Coba gunakan versi yang lebih tinggi dan pastikan kedua tautan memiliki versi yang sama jQuery

tenstormavi.dll
sumber
Masalah potensial untuk mencapai "TypeError: $ (…) .DataTable bukanlah sebuah fungsi" karena Datatables mulai menyediakan pembuat unduhan pick-your-own adalah Anda memilih jquery dalam unduhan tetapi juga sudah memilikinya di halaman Anda.
Wombat yang
Untuk memperjelas - kesalahan ini berasal dari sumber LAIN juga. Saya memilikinya dalam urutan yang benar dan tidak menggunakan dua jQuerys. Untuk berjaga-jaga seandainya ada jiwa malang lain yang ikut .... Ketika berfungsi
Tabel Data
2

Sejujurnya, ini membutuhkan waktu berjam-jam untuk memperbaikinya. Akhirnya hanya satu hal yang berhasil yaitu konfirmasi ulang terhadap solusi yang diberikan oleh "Basheer AL-MOMANI". Yang mana hanya sekedar pernyataan

   @RenderSection("scripts", required: false)

dalam _Layout.cshtmlfile setelah semua <script></script>elemen dan juga memberi komentar pada skrip jquery di file yang sama. Kedua, saya harus menambahkan

 $.noConflict();

dalam panggilan fungsi jquery di file * .cshtml lain sebagai:

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

        });
muhammad tayyab
sumber
1

Saya mengalami kesalahan ini juga. Untuk alasan apa pun saya awalnya membuat kode

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

Ini tidak akan membuang kesalahan kadang-kadang dan di lain waktu itu akan terjadi. Dengan mengubah kode menjadi

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

Kesalahan sepertinya telah berhenti

Mike Volmar
sumber
0

Saya tahu terlambat Beli dapat membantu seseorang

Ini juga bisa terjadi jika Anda tidak menambahkan $('#myTable').DataTable();di dalamdocument.ready

Jadi, bukan ini

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

Coba ini

$(document).ready(function() {
    $('#myTable').DataTable();
});
Tech Yogesh
sumber
0

Dalam kasus saya, solusinya adalah menghapus cookie dari browser.

Agath
sumber
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
sumber
0

Memiliki masalah yang sama di Flask, saya sudah memiliki template yang memuat JQuery, Popper dan Bootstrap. Saya memperluas template itu ke template lain yang saya gunakan sebagai dasar untuk memuat halaman yang memiliki tabel.

Untuk beberapa alasan di Flask ternyata file di template luar dimuat sebelum file dalam tabel di atas dalam hierarki (yang Anda perluas) jadi JQuery memuat sebelum file DataTables menyebabkan masalah.

Saya harus membuat template lain tempat saya menjalankan semua impor JS CDN saya di tempat yang sama, yang menyelesaikan masalah.

Daniel Herrera
sumber