[解決済み】TypeError: $(...).DataTable は関数ではありません。
2022-01-18 02:02:59
質問
私のプロジェクトでjQueryの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の参照をすべて追加しました。それでもレンダリングは期待通りではありません。CSSはなく、JSさえも動作しません。
また、コンソールでは以下のエラーが表示されます。
ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function
私はまだここに動的なデータをバインドしていない(リピータ内など)それでも動作しません。
どなたか、この問題に対して正しい方向に導いていただけませんか?
どのように解決するのですか?
原因
このエラーには複数の原因が考えられます。
- jQuery DataTables ライブラリが不足しています。
- jQueryライブラリがロードされている 後 jQuery DataTablesです。
- 複数のバージョンのjQueryライブラリがロードされる。
解決方法
以下が含まれます。 ひとつだけ jQuery ライブラリ バージョン 1.7 以降のバージョン 以前 jQuery DataTablesを使用します。
例えば
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
参照 jQuery DataTables。よくあるJavaScriptのコンソールエラー を参照してください。
関連
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] JavaScriptでNULL、未定義、空白の変数をチェックする標準的な関数はありますか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] CSS calc()関数内のSass変数
-
[解決済み] .css()関数で追加したスタイルを削除するにはどうしたらいいですか?
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js
-
[解決済み] jQueryで、ユーザーがそのフィールドを編集している間、テキストフィールドの最初の文字を大文字にするにはどうすればよいですか?
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み】getElementByIdはnullを返す?[クローズド]
-
[解決済み】JS ファイルが net::ERR_ABORTED 404 (Not Found) を取得する)
-
[解決済み】React-Routerの子が1つしかない。