Помилка типу: $ (…). Таблиця даних не є функцією


90

Я намагаюся працювати з JQuery's 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>

Моя структура файлів для JS та CSS у моєму рішенні виглядає наступним чином:

Структура файлів JS та CSS у розв’язанні

Я додав усі необхідні посилання на JS та CSS, як показано в посібнику. Все-таки візуалізація не така, як очікувалося. Немає CSS і навіть JS не працює.

Також у консолі я отримую такі помилки:

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

Я досі не прив'язував сюди жодних динамічних даних (наприклад, всередині ретранслятора), він все ще не працює.

Чи може хтось, будь ласка, направити мене у правильному напрямку для вирішення цієї проблеми?


Який би код я не писав, був чудовим, але я також отримав ту саму помилку. Після тривалого аналізу я просто перезапустив свій ПК, оскільки не перезавантажувався з останніх 7 днів. Потім мій код почав працювати.
Ашок кумар,

@Ashokkumar: Вам, мабуть, пощастило!
Абхішек Гош

Відповіді:


130

ПРИЧИНА

Причин цієї помилки може бути кілька.

  • Відсутня бібліотека jQuery DataTables.
  • Бібліотека jQuery завантажується після jQuery DataTables.
  • Завантажено кілька версій бібліотеки jQuery.

РІШЕННЯ

До jQuery DataTables включайте лише одну версію бібліотеки jQuery версії 1.7 або новішої .

Наприклад:

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

Див. Таблиці даних jQuery: Загальні помилки консолі JavaScript для отримання додаткової інформації про цю та інші поширені помилки консолі.


45

Це спрацювало для мене. Але не забудьте завантажити jquery.js перед бажаним файлом dataTable.js. На здоров’я!

<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
Ключ для мене був виклик $ .noConflict () у методі. Дякую.
jrebs

36

Я отримав цю помилку, оскільки виявив, що двічі посилався на jQuery.

Перший раз: на головній сторінці ( _Layout.cshtml) в ASP.NET MVC, а потім знову на одній поточній сторінці, тому я прокоментував цю на головній сторінці.

Якщо ви використовуєте ASP.NET MVC, цей фрагмент може вам допомогти

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

і на поточній сторінці я додав ці рядки

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

Сподіваюся, це допоможе вам, навіть якщо ви не використовуєте ASP.NET MVC


Власне, я прокоментував jquery.min.js в _Layout.cshtml. Однак, що справді спрацювало для мене, це розміщення @RenderSection ("скрипти", обов'язково: false) в самий низ після всіх елементів <scripts> </scripts>.
Мухаммед Тайяб

велике спасибі, ваша відповідь закінчилася за 4 години встановлення та перевстановлення таблиць даних jquery! У мене є питання: що, якщо мені потрібен jQuery в _Layout.cshtml і потрібні таблиці даних у myView.cshtml, що мені робити, оскільки не згадування jQuery у myView.cshtml спричинить "jQuery не визначено"?
Хамза Дахмун

19

якщо з якихось причин завантажено дві версії jQuery (що не рекомендується), виклик $.noConflict(true)з другої версії поверне глобально змінні змінні jQuery до змін першої версії.

Іноді це може бути проблемою зі старою версією (або не стабільною) файлів JQuery

Використання розчину $.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>

використовуючи jquery з laravel з Blade як моїм шаблонізатором ... На диво, це єдиний спосіб, який у мене спрацював - Звичайно, ви знаєте розробників ... Коли це працює, ви припиняєте пошук!
Даніель Варуй,

noConflict () працював у мене. Я думаю, у мене була встановлена ​​інша версія jQuery.
Аарон

10

Ось повний набір JS та CSS, необхідні для того, щоб плагін експорту таблиці працював ідеально.

Сподіваюся, це заощадить ваш час

   <!--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 для додавання кнопок експорту в таблиці з id = tbl

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

Результат: -

введіть тут опис зображення


Я зміг зробити це без викликів сценарію "кнопки таблиці експорту". Хороший матеріал.
Марк

7

Причини цієї помилки можуть бути дві:

Спочатку

Ви подаєте jQuery.DataTables.jsраніше, jquery.jsтак що для цього: -

Вам потрібно завантажити, jQuery.jsперш ніж завантажуватиjQuery.DataTables.js

По-друге

Ви використовуєте дві версії jQuery.jsна одній сторінці, для цього: -

Спробуйте використовувати вищу версію та переконайтесь, що обидва посилання мають однакову версію jQuery


Потенційною проблемою для досягнення "TypeError: $ (...). DataTable не є функцією", оскільки Datatables почав надавати самостійний конструктор завантажень, є те, що ви вибрали jquery під час завантаження, але також уже маєте його на своїй сторінці.
Переможений вомбат

Щоб зрозуміти - ця помилка викинута і з ІНШИХ джерел. Я мав їх у правильному порядку і не використовував два jQuerys. Про всяк випадок, коли прийде якась інша бідна душа .... Коли вона працює, таблиці даних - це чудово, але це, як мені подобається, (приблизно через годину, щоб ще одна ****** інсталяція запрацювала!
BeNice

2

Чесно кажучи, це зайняло години, щоб це виправити. Нарешті, лише одне спрацювало з підтвердженням рішення, наданого "Basheer AL-MOMANI". Що просто виставляє заяву

   @RenderSection("scripts", required: false)

всередині _Layout.cshtmlфайлу після всіх <script></script>елементів, а також коментування скрипта jquery в тому ж файлі. По-друге, довелося додати

 $.noConflict();

у межах функції jquery викликати інший файл * .cshtml як:

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

        });

1

Я також зіткнувся з цією помилкою. З будь-якої причини, яку я спочатку кодував

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

Це не призведе до помилки інколи, а інколи - до помилки. Змінивши код на

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

Здається, помилка зупинена


0

Я знаю, що його пізня покупка може комусь допомогти

Це також може статися, якщо ви не додасте $('#myTable').DataTable();всерединуdocument.ready

Тож замість цього

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

Спробуйте це

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

0

У моєму випадку рішенням було видалення файлів cookie з браузера.


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, у мене вже був шаблон, який завантажував JQuery, Popper та Bootstrap. Я поширював цей шаблон на інший шаблон, який я використовував як основу для завантаження сторінки, в якій була таблиця.

З якихось причин у Flask, очевидно, файли у зовнішньому шаблоні завантажуються до файлів у таблицях вище в ієрархії (тих, які ви розширюєте), тому JQuery завантажувався до файлів DataTables, що спричинили проблему.

Мені довелося створити ще один шаблон, де я запускаю всі свої імпорти JS CDN-файлів там же, що вирішило проблему.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.