BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] DataTables JQuery ライブラリで DataTable が関数でないエラーが発生する

2022-02-14 07:52:24

質問

Datatable ライブラリを使用する簡単な例があります。JSFiddleで動作させています ( http://jsfiddle.net/3hhn7y7f/ )が、実際のファイルで行おうとすると、以下のようなエラーが発生します。私は JQuery の中で定義されている <script> タグがあるので、何が問題なのかわかりません。

Uncaught ReferenceError: jQuery is not defined

Uncaught TypeError: $(...).DataTable is not a function

HTMLファイル 

<html>
<head>
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="script.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example" class="display" width="100%"></table>

 </body>
 </html>

script.js 

var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ]
];

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

解決方法は？

の順番を入れ替える必要がありそうです。 <script> タグを使用します。

これを入れてください。 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

BEFORE これです。 

<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

つまり、DataTablesを定義する前にjQueryを定義することです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します