質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

Q&A

解決済

1回答

5653閲覧

jQuery DataTablesが反映されない

javabeginar

総合スコア13

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

0グッド

1クリップ

投稿2018/06/27 07:44

編集2018/06/28 05:33

いつもお世話になっております。
JSPとサーブレットを使い、検索システムを作っているのですが、jQueryのDatatablesが
反映されません。

どこが間違っているのかどなたかご教示ください。

CSSとDataTablesのパスは合っています。

参考にしたサイトはこちらです。
https://www.datatables.net/examples/advanced_init/dt_events.html
www.tailtension.com/jquery/45/

よろしくお願いいたします。

追記
コンソール上のエラーです。
datatables.js:1183 Uncaught TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (datatables.js:1183)
at Function.each (jquery-1.11.0.min.js:2)
at n.fn.init.each (jquery-1.11.0.min.js:2)
at HTMLTableElement.<anonymous> (datatables.js:1180)
at Function.each (jquery-1.11.0.min.js:2)
at n.fn.init.each (jquery-1.11.0.min.js:2)
at n.fn.init.DataTable [as dataTable] (datatables.js:881)
at HTMLDocument.<anonymous> (search:32)
at j (jquery-1.11.0.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)

追記6/28
コードの修正
https://qiita.com/monta31538/items/ad160bad13e977f9ffbe
こちらを参考にしてみたところ、反映されました。
しかし、テーブルデータが読み込まれていないのか、ページングや並べ替えの機能が
使えません。

コンソール上のエラーは下記の通りです。
SCRIPT5007: Unable to get property 'defaults' of undefined or null reference

"jQuery" "html" "css"

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <jsp:include page="header1.jsp" /> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script> <!-- datatables jquery --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/datatables.js"></script> <script> $(document).ready(function() { $('#example').DataTable( { "pagingType": "full_numbers" } ); } ); </script> <Script> <!-- function fncDisp() { label1.innerHTML = document.f.nam.value; label2.innerHTML = document.f.namae.value; label3.innerHTML = document.f.mail.value; } function shwSelect() { //セレクトボックスの値(数値)を取得 var num = document.f.depart.selectedIndex; // 値(value値)を取得 var str = document.f.depart.options[num].value; document.getElementById("label4").innerHTML = str; //セレクトボックスの値(数値)を取得 var num = document.f.title.selectedIndex; // 値(value値)を取得 var str = document.f.title.options[num].value; document.getElementById("label5").innerHTML = str; } function FormSubmit() { var target = document.getElementById("search"); //fからvalueを取得 document.getElementById('s1').value = document.f.nam.value; document.getElementById('s2').value = document.f.namae.value; document.getElementById('s3').value = document.f.mail.value; document.getElementById('s4').value = document.f.depart.value; document.getElementById('s5').value = document.f.title.value; target.method = "post"; target.submit(); } function FormExport() { var target = document.getElementById("export"); //fからvalueを取得 document.getElementById("e1").value = document.f.nam.value; document.getElementById("e2").value = document.f.namae.value; document.getElementById("e3").value = document.f.mail.value; document.getElementById("e4").value = document.f.depart.value; document.getElementById("e5").value = document.f.title.value; target.method = "post"; target.submit(); } --> </Script> <title>社員管理システム</title> </head> <body> <jsp:include page="nav1.jsp" /> <form name="f" action=""> <div class="containers"> <table class="table"> <tr> <th>従業員名</th> <td> <span id="label1"></span> <input type="text" name="nam" value="<c:out value="${dto.nam}" />" maxlength="128" size="60"/></td> </tr> <tr> <th>従業員名(フリガナ)</th> <td> <span id="label2"></span> <input type="text" name="namae" value="<c:out value="${dto.namae}" />" maxlength="128" size="60"/></td> </tr> <tr> <th>メールアドレス</th> <td><span id="label3"></span> <input type="text" name="mail" value="<c:out value="${dto.mail}" />" maxlength="128" size="60"/></td> </tr> <tr> <th>部署</th> <td><span id="label4"></span> <select name="depart"> <option value="">選択してください</option> <option value="エンジニアリング事業部">エンジニアリング事業部</option> <option value="活用事業部">活用事業部</option> <option value="営業部">営業部</option> <option value="役員">役員</option> </select> </td> </tr> <tr> <th>役職</th> <td><span id="label5"></span> <select name="title"> <option value="">選択してください</option> <option value="CEO">CEO</option> <option value="COO">COO</option> <option value="CTO">CTO</option> <option value="部長">部長</option> <option value="係長">係長</option> <option value="主任">主任</option> </select> </td> </tr> </table> </div>   <input type="button" class="btn btn-default" name="confirm" value="確認" onClick="fncDisp(), shwSelect()"> </form> <form id="search" action="search" method="POST"> <input type="hidden" id="s1" name="label1" /> <input type="hidden" id="s2" name="label2" /> <input type="hidden" id="s3" name="label3" /> <input type="hidden" id="s4" name="label4" /> <input type="hidden" id="s5" name="label5" /> <input class="btn btn-success center-block" name="search" value="検索" onClick="FormSubmit()" /> </form> <form id="export" action="export" method="POST"> <input type="hidden" id="e1" name="label1" type="text" /> <input type="hidden" id="e2" name="label2" type="text" /> <input type="hidden" id="e3" name="label3" type="text" /> <input type="hidden" id="e4" name="label4" type="text" /> <input type="hidden" id="e5" name="label5" type="text" /> <input class="btn btn-info center-block" name="export" value="エクスポート" onClick="FormExport()" /> </form> <br /> <!-- <div class="container" id="demo_pag1"> --> <table id="example"> <thead> <tr> <th>従業員名</th> <th>従業員名(フリガナ)</th> <th>メールアドレス</th> <th>部署</th> <th>役職</th> </tr> </thead> <c:forEach items="${todoList}" var="dto"> <tbody> <tr> <td><c:out value="${dto.nam}" /></td> <td><c:out value="${dto.namae}" /></td> <td><c:out value="${dto.mail}" /></td> <td><c:out value="${dto.depart}" /></td> <td><c:out value="${dto.title}" /></td> </tr> </tbody> </c:forEach> </table> <!-- </div> --> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/06/27 07:59

起きている現象を具体的に記載してください。ブラウザ開発ツールのコンソールにエラーがでていないか、とかも確認して確認した結果を追記してください。 >反映されません
javabeginar

2018/06/28 05:18

ありがとうございます。テーブルは無事反映されました。
m.ts10806

2018/06/28 05:20

自身で回答を書き自己解決としてはいかがでしょうか?teratailでは質問者自身で回答を書き「ベストアンサー」とすることで「自己解決」ができるようになっています。 https://teratail.com/help#resolve-myself
javabeginar

2018/06/28 05:23

ページング機能が反映されていないので調べてみます。
m.ts10806

2018/06/28 05:31

ページングについては今初めて触れられたものです。タイトルと現在の状態が合っていないように思いますので、要件として調整してください。それか一旦クローズして別質問としてください。
javabeginar

2018/06/28 05:36

DataTablesのテーブルにはなりましたが、並べ替えなど、テーブル自体に付いている機能が反映されておりませんので、引き続きこのページで質問、または自己解決したいと思います。
guest

回答1

0

自己解決

DataTablesのテーブルの書式はthとtdの数を一緒にすることで解決しました。

https://qiita.com/monta31538/items/ad160bad13e977f9ffbe
こちらのサイトを教えてくださったryochinさん、ありがとうございました。

データが認識されておらず、検索、並び替え、ページングが出来なかった件については
<c:forEach>を<tbody>の内側に配置することで解決されました。

古いコード

<c:forEach items="${todoList}" var="dto"> <tbody> <tr> <td><c:out value="${dto.nam}" /></td> <td><c:out value="${dto.namae}" /></td> <td><c:out value="${dto.mail}" /></td> <td><c:out value="${dto.depart}" /></td> <td><c:out value="${dto.title}" /></td> </tr> </tbody>      </c:forEach>

新しいコード

</c:forEach> <tbody> <c:forEach items="${todoList}" var="dto"> <tr> <td><c:out value="${dto.nam}" /></td> <td><c:out value="${dto.namae}" /></td> <td><c:out value="${dto.mail}" /></td> <td><c:out value="${dto.depart}" /></td> <td><c:out value="${dto.title}" /></td> </tr> </c:forEach> </tbody>

投稿2018/06/28 06:06

javabeginar

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問