TypeError：$（…）.DataTableは関数ではありません

Question 1

このリンクから、プロジェクトでjQueryのDatatableJSを使用しようとしています。

同じソースから完全なライブラリをダウンロードしました。パッケージに含まれているすべての例は正常に機能しているように見えますが、それらを自分のに取り込もうとする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

私はまだここで動的データをバインドしていません（リピーター内など）。それでも機能していません。

誰かがこの問題の正しい方向に私を導くことができますか？

Question 2

原因

このエラーには複数の理由が考えられます。

jQueryDataTablesライブラリがありません。
jQueryライブラリはjQueryDataTablesの後にロードされます。
jQueryライブラリの複数のバージョンがロードされます。

解決

jQuery DataTablesの前に、jQueryライブラリバージョン1.7以降のバージョンを1つだけ含めます。

例えば：

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

このエラーおよびその他の一般的なコンソールエラーの詳細については、「jQuery DataTables：一般的なJavaScriptコンソールエラー」を参照してください。

Question 3

これは私のために働いた。ただし、優先するdataTable.jsファイルの前にjquery.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>

Question 4

jQueryを2回参照していることがわかったため、このエラーが発生しました。

初回：_Layout.cshtmlASP.NET MVCのマスターページ（）で、次に現在の1つのページで、マスターページのページをコメントアウトしました。

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を使用しなくても、これがお役に立てば幸いです。

Question 5

何らかの理由で2つのバージョンのjQueryがロードされた場合（これは推奨されません）、$.noConflict(true)2番目のバージョンから呼び出すと、グローバルスコープの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>

Question 6

これは、エクスポートテーブルプラグインが完全に機能するために必要な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">

id =のテーブルにエクスポートボタンを追加するjavascript tbl

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

結果：-

Question 7

このエラーには2つの理由が考えられます。

最初

あなたはそのためにjQuery.DataTables.js前に寄宿jquery.jsしている：-

ロードjQuery.jsする前にロードする必要がありますjQuery.DataTables.js

2番目

jQuery.js同じページでの2つのバージョンを使用しているので、そのために：-

上位バージョンを使用して、両方のリンクのバージョンが同じであることを確認してください jQuery

Question 8

正直なところ、これを修正するには数時間かかりました。最後に、「BasheerAL-MOMANI」によって提供されたソリューションの再確認が機能したのは1つだけでした。これはただの声明です

   @RenderSection("scripts", required: false)

_Layout.cshtmlすべての<script></script>要素の後のファイル内で、同じファイル内のjqueryスクリプトにコメントします。第二に、私は追加しなければなりませんでした

 $.noConflict();

別の* .cshtmlファイルでのjquery関数呼び出し内で次のようになります。

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

        });

Question 9

私もこのエラーに遭遇しました。なんらかの理由で私は最初にコーディングしました

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

これにより、エラーがスローされない場合とスローされる場合があります。コードをに変更する

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

エラーが停止したようです

Question 10

私はその遅い購入が誰かを助けることができることを知っています

これは、$('#myTable').DataTable();内部に追加しない場合にも発生する可能性がありますdocument.ready

だからこれの代わりに

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

これを試して

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

Question 11

私の場合、解決策はブラウザからCookieを削除することでした。

Question 12

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

Question 13

Flaskでも同じ問題があり、JQuery、Popper、Bootstrapをロードするテンプレートがすでにありました。そのテンプレートを、テーブルのあるページをロードするためのベースとして使用していた他のテンプレートに拡張していました。

何らかの理由でFlaskでは、外部テンプレートのファイルが階層の上のテーブルのファイル（拡張しているファイル）の前に読み込まれるため、JQueryがDataTablesファイルの前に読み込まれて問題が発生しました。

JS CDNのすべてのインポートを同じ場所で実行する別のテンプレートを作成する必要がありました。これにより、問題が解決しました。