teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問jQuery DataTablesが反映されない

編集履歴

質問編集履歴

4

コードの修正、追記

2018/06/28 05:33

投稿

javabeginar
javabeginar

スコア13

test CHANGED
File without changes
test CHANGED
@@ -60,6 +60,30 @@
60
60
 
61
61
 
62
62
 
63
+ 追記6/28
64
+
65
+ コードの修正
66
+
67
+ https://qiita.com/monta31538/items/ad160bad13e977f9ffbe
68
+
69
+ こちらを参考にしてみたところ、反映されました。
70
+
71
+ しかし、テーブルデータが読み込まれていないのか、ページングや並べ替えの機能が
72
+
73
+ 使えません。
74
+
75
+
76
+
77
+ コンソール上のエラーは下記の通りです。
78
+
79
+ SCRIPT5007: Unable to get property 'defaults' of undefined or null reference
80
+
81
+
82
+
83
+
84
+
85
+
86
+
63
87
 
64
88
 
65
89
  "jQuery" "html" "css"
@@ -78,90 +102,42 @@
78
102
 
79
103
  <jsp:include page="header1.jsp" />
80
104
 
81
-
82
-
83
- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
105
+ <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
106
+
84
-
107
+ <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
108
+
85
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
109
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
110
+
111
+
86
112
 
87
113
  <!-- datatables jquery -->
88
114
 
89
- <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/datatables.css">
115
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
90
116
 
91
117
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/datatables.js"></script>
92
118
 
93
119
 
94
120
 
121
+
122
+
95
- <script>
123
+ <script>
124
+
125
+
126
+
96
-
127
+ $(document).ready(function() {
128
+
97
- var table = $('#paging').dataTable({
129
+ $('#example').DataTable( {
98
-
99
- // 件数切替の値を10～50の10刻みにする
130
+
100
-
101
- lengthMenu: [ 10, 20, 30, 40, 50 ]
102
-
103
- });
104
-
105
- $('#paging').on( 'page.dt', function () {
131
+ "pagingType": "full_numbers"
106
-
107
- var info = table.page.info();
108
-
109
- $('#pageInfo').html( 'Showing page: '+info.page+' of '+info.pages );
110
132
 
111
133
  } );
112
134
 
135
+ } );
136
+
113
137
  </script>
114
138
 
115
139
 
116
140
 
117
- <!-- @example
118
-
119
- * $(document).ready(function() {
120
-
121
- * var oTable = $('#example').dataTable();
122
-
123
- *
124
-
125
- * // Highlight every second row
126
-
127
- * oTable.$('tr:odd').css('backgroundColor', 'blue');
128
-
129
- * } );
130
-
131
- *
132
-
133
- * @example
134
-
135
- * $(document).ready(function() {
136
-
137
- * var oTable = $('#example').dataTable();
138
-
139
- *
140
-
141
- * // Filter to rows with 'Webkit' in them, add a background colour and then
142
-
143
- * // remove the filter, thus highlighting the 'Webkit' rows only.
144
-
145
- * oTable.fnFilter('Webkit');
146
-
147
- * oTable.$('tr', {"search": "applied"}).css('backgroundColor', 'blue');
148
-
149
- * oTable.fnFilter('');
150
-
151
- * } );
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
- -->
160
-
161
-
162
-
163
-
164
-
165
141
  <Script>
166
142
 
167
143
  <!--
@@ -332,7 +308,7 @@
332
308
 
333
309
  <option value="">選択してください</option>
334
310
 
335
- <option value="システム事業部">システム事業部</option>
311
+ <option value="エンジニアリング事業部">エンジニアリング事業部</option>
336
312
 
337
313
  <option value="活用事業部">活用事業部</option>
338
314
 
@@ -428,7 +404,7 @@
428
404
 
429
405
  <!-- <div class="container" id="demo_pag1"> -->
430
406
 
431
- <table id="paging" class="table table-bordered">
407
+ <table id="example">
432
408
 
433
409
  <thead>
434
410
 
@@ -448,11 +424,11 @@
448
424
 
449
425
  </thead>
450
426
 
427
+ <c:forEach items="${todoList}" var="dto">
428
+
451
429
  <tbody>
452
430
 
453
- <c:forEach items="${todoList}" var="dto">
454
-
455
- <tr id="pageInfo">
431
+ <tr>
456
432
 
457
433
  <td><c:out value="${dto.nam}" /></td>
458
434
 
@@ -464,14 +440,12 @@
464
440
 
465
441
  <td><c:out value="${dto.title}" /></td>
466
442
 
467
- <td>
468
-
469
443
  </tr>
470
444
 
471
- </c:forEach>
472
-
473
445
  </tbody>
474
446
 
447
+ </c:forEach>
448
+
475
449
  </table>
476
450
 
477
451
  <!-- </div> -->
@@ -484,8 +458,4 @@
484
458
 
485
459
 
486
460
 
487
-
488
-
489
-
490
-
491
461
  ```

3

エラーメッセージの追加

2018/06/28 05:33

投稿

javabeginar
javabeginar

スコア13

test CHANGED
File without changes
test CHANGED
@@ -34,9 +34,29 @@
34
34
 
35
35
  追記
36
36
 
37
- コンソール上にエラーは出ておりません。
37
+ コンソール上のエラーです。
38
+
38
-
39
+ datatables.js:1183 Uncaught TypeError: Cannot read property 'mData' of undefined
40
+
41
+ at HTMLTableCellElement.<anonymous> (datatables.js:1183)
42
+
43
+ at Function.each (jquery-1.11.0.min.js:2)
44
+
45
+ at n.fn.init.each (jquery-1.11.0.min.js:2)
46
+
47
+ at HTMLTableElement.<anonymous> (datatables.js:1180)
48
+
49
+ at Function.each (jquery-1.11.0.min.js:2)
50
+
51
+ at n.fn.init.each (jquery-1.11.0.min.js:2)
52
+
39
- テーブルは表示されていますが、jQueryのDataTableではなく通常のテーブルです。
53
+ at n.fn.init.DataTable [as dataTable] (datatables.js:881)
54
+
55
+ at HTMLDocument.<anonymous> (search:32)
56
+
57
+ at j (jquery-1.11.0.min.js:2)
58
+
59
+ at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
40
60
 
41
61
 
42
62
 

2

追記しました。

2018/06/27 09:26

投稿

javabeginar
javabeginar

スコア13

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,10 @@
4
4
 
5
5
  反映されません。
6
6
 
7
+
8
+
9
+
10
+
7
11
  どこが間違っているのかどなたかご教示ください。
8
12
 
9
13
 
@@ -26,6 +30,18 @@
26
30
 
27
31
 
28
32
 
33
+
34
+
35
+ 追記
36
+
37
+ コンソール上にエラーは出ておりません。
38
+
39
+ テーブルは表示されていますが、jQueryのDataTableではなく通常のテーブルです。
40
+
41
+
42
+
43
+
44
+
29
45
  "jQuery" "html" "css"
30
46
 
31
47
 

1

変更しました

2018/06/27 08:07

投稿

javabeginar
javabeginar

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  いつもお世話になっております。
2
2
 
3
- Eclipseを使い、検索システムを作っているのですが、jQueryのDatatablesが
3
+ JSPとサーブレットを使い、検索システムを作っているのですが、jQueryのDatatablesが
4
4
 
5
5
  反映されません。
6
6