いつもお世話になっております。
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>
回答1件
あなたの回答
tips
プレビュー