web-dev-qa-db-ja.com

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

私は自分のプロジェクトのためにjQueryのDatatable JSを this linkから操作しようとしています。

私は同じソースから完全なライブラリをダウンロードしました。パッケージに含まれている例はすべてうまくいくように見えますが、それらを私の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のファイル構造は次のようになります。

File structure of JS and CSS in solution

マニュアルに示されているように、必要なJSおよびCSSの参照をすべて追加しました。それでもレンダリングは予想通りではありません。 CSSはなく、JSも動作しません。

また、コンソールで私は次のエラーが出ます：

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

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

誰かがこの問題に対して正しい方向に私を導いてくれますか？

javascriptjquerycssasp.netdatatables
51
Abhishek Ghosh

JQueryをロードする必要がありますbefore jQueryデータテーブルなどのjQuery関連のコードをロードする必要があります。下記を参照してください。

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

また、製品版では、縮小版（代わりに.min.jsで終わる）を読み込むことをお勧めします。

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

70
Gyrocode.com

JQueryを2回参照したことがわかったので、このエラーが発生しました。

1回目は、ASP.NET MVCのマスターページ（_Layout.cshtml）に表示し、次に現在の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を使用していなくてもこのヘルプが役立つことを願っています

25
Basheer AL-MOMANI

これは私のために働きました。ただし、優先の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>
24
Ichorville

何らかの理由でjQueryの2つのバージョンがロードされている場合（これはお勧めできません）、2番目のバージョンから$.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>
11
Manoj Patil

これはエクスポートテーブルプラグインが完全に機能するために必要な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 = tblのテーブルにエクスポートボタンを追加するためのJavaScript

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

結果： -

enter image description here

6
Hitesh Sahu

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

最初の

jQuery.DataTables.jsの前にjquery.jsをコーディングしているので、そのためには： -

jQuery.jsを読み込む前にjQuery.DataTables.jsを読み込む必要があります

秒

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

より高いバージョンを使用し、両方のリンクが同じバージョンのjQuerynameを持っていることを確認してください__

4
tenstormavi