teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

コードの修正、追記

2018/06/28 05:33

投稿

javabeginar
javabeginar

スコア13

title CHANGED
File without changes
body CHANGED
@@ -29,7 +29,19 @@
29
29
  at j (jquery-1.11.0.min.js:2)
30
30
  at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
31
31
 
32
+ 追記6/28
33
+ コードの修正
34
+ https://qiita.com/monta31538/items/ad160bad13e977f9ffbe
35
+ こちらを参考にしてみたところ、反映されました。
36
+ しかし、テーブルデータが読み込まれていないのか、ページングや並べ替えの機能が
37
+ 使えません。
32
38
 
39
+ コンソール上のエラーは下記の通りです。
40
+ SCRIPT5007: Unable to get property 'defaults' of undefined or null reference
41
+
42
+
43
+
44
+
33
45
  "jQuery" "html" "css"
34
46
 
35
47
  ```
@@ -38,48 +50,24 @@
38
50
  <head>
39
51
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
40
52
  <jsp:include page="header1.jsp" />
53
+ <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
54
+ <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
55
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
41
56
 
42
- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
43
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
44
57
  <!-- datatables jquery -->
45
- <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/datatables.css">
58
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
46
59
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/datatables.js"></script>
47
60
 
61
+
48
- <script>
62
+ <script>
63
+
64
+ $(document).ready(function() {
49
- var table = $('#paging').dataTable({
65
+ $('#example').DataTable( {
50
- // 件数切替の値を10~50の10刻みにする
51
- lengthMenu: [ 10, 20, 30, 40, 50 ]
52
- });
53
- $('#paging').on( 'page.dt', function () {
66
+ "pagingType": "full_numbers"
54
- var info = table.page.info();
55
- $('#pageInfo').html( 'Showing page: '+info.page+' of '+info.pages );
56
67
  } );
68
+ } );
57
69
  </script>
58
70
 
59
- <!-- @example
60
- * $(document).ready(function() {
61
- * var oTable = $('#example').dataTable();
62
- *
63
- * // Highlight every second row
64
- * oTable.$('tr:odd').css('backgroundColor', 'blue');
65
- * } );
66
- *
67
- * @example
68
- * $(document).ready(function() {
69
- * var oTable = $('#example').dataTable();
70
- *
71
- * // Filter to rows with 'Webkit' in them, add a background colour and then
72
- * // remove the filter, thus highlighting the 'Webkit' rows only.
73
- * oTable.fnFilter('Webkit');
74
- * oTable.$('tr', {"search": "applied"}).css('backgroundColor', 'blue');
75
- * oTable.fnFilter('');
76
- * } );
77
-
78
-
79
-
80
- -->
81
-
82
-
83
71
  <Script>
84
72
  <!--
85
73
 
@@ -165,7 +153,7 @@
165
153
  <td><span id="label4"></span>
166
154
  <select name="depart">
167
155
  <option value="">選択してください</option>
168
- <option value="システム事業部">システム事業部</option>
156
+ <option value="エンジニアリング事業部">エンジニアリング事業部</option>
169
157
  <option value="活用事業部">活用事業部</option>
170
158
  <option value="営業部">営業部</option>
171
159
  <option value="役員">役員</option>
@@ -213,7 +201,7 @@
213
201
 
214
202
  <br />
215
203
  <!-- <div class="container" id="demo_pag1"> -->
216
- <table id="paging" class="table table-bordered">
204
+ <table id="example">
217
205
  <thead>
218
206
  <tr>
219
207
  <th>従業員名</th>
@@ -223,24 +211,21 @@
223
211
  <th>役職</th>
224
212
  </tr>
225
213
  </thead>
214
+ <c:forEach items="${todoList}" var="dto">
226
215
  <tbody>
227
- <c:forEach items="${todoList}" var="dto">
228
- <tr id="pageInfo">
216
+ <tr>
229
217
  <td><c:out value="${dto.nam}" /></td>
230
218
  <td><c:out value="${dto.namae}" /></td>
231
219
  <td><c:out value="${dto.mail}" /></td>
232
220
  <td><c:out value="${dto.depart}" /></td>
233
221
  <td><c:out value="${dto.title}" /></td>
234
- <td>
235
222
  </tr>
236
- </c:forEach>
237
223
  </tbody>
224
+ </c:forEach>
238
225
  </table>
239
226
  <!-- </div> -->
240
227
 
241
228
  </body>
242
229
  </html>
243
230
 
244
-
245
-
246
231
  ```

3

エラーメッセージの追加

2018/06/28 05:33

投稿

javabeginar
javabeginar

スコア13

title CHANGED
File without changes
body CHANGED
@@ -16,8 +16,18 @@
16
16
 
17
17
 
18
18
  追記
19
- コンソール上エラーは出ておりません
19
+ コンソール上エラーです
20
+ datatables.js:1183 Uncaught TypeError: Cannot read property 'mData' of undefined
21
+ at HTMLTableCellElement.<anonymous> (datatables.js:1183)
22
+ at Function.each (jquery-1.11.0.min.js:2)
23
+ at n.fn.init.each (jquery-1.11.0.min.js:2)
24
+ at HTMLTableElement.<anonymous> (datatables.js:1180)
25
+ at Function.each (jquery-1.11.0.min.js:2)
26
+ at n.fn.init.each (jquery-1.11.0.min.js:2)
20
- テーブルは表示されていますが、jQueryのDataTableではなく通常のテーブルです。
27
+ at n.fn.init.DataTable [as dataTable] (datatables.js:881)
28
+ at HTMLDocument.<anonymous> (search:32)
29
+ at j (jquery-1.11.0.min.js:2)
30
+ at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
21
31
 
22
32
 
23
33
  "jQuery" "html" "css"

2

追記しました。

2018/06/27 09:26

投稿

javabeginar
javabeginar

スコア13

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,8 @@
1
1
  いつもお世話になっております。
2
2
  JSPとサーブレットを使い、検索システムを作っているのですが、jQueryのDatatablesが
3
3
  反映されません。
4
+
5
+
4
6
  どこが間違っているのかどなたかご教示ください。
5
7
 
6
8
  CSSとDataTablesのパスは合っています。
@@ -12,6 +14,12 @@
12
14
  よろしくお願いいたします。
13
15
 
14
16
 
17
+
18
+ 追記
19
+ コンソール上にエラーは出ておりません。
20
+ テーブルは表示されていますが、jQueryのDataTableではなく通常のテーブルです。
21
+
22
+
15
23
  "jQuery" "html" "css"
16
24
 
17
25
  ```

1

変更しました

2018/06/27 08:07

投稿

javabeginar
javabeginar

スコア13

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
1
  いつもお世話になっております。
2
- Eclipseを使い、検索システムを作っているのですが、jQueryのDatatablesが
2
+ JSPとサーブレットを使い、検索システムを作っているのですが、jQueryのDatatablesが
3
3
  反映されません。
4
4
  どこが間違っているのかどなたかご教示ください。
5
5