Q&A
ソート機能が動作しない、とはどういう状況を指しますか？そもそもカラムヘッダにソート矢印ボタンが出ない、押しても反応しない、ソート順がおかしいなど、詳細に書いてください。また、質問文のコードは```で囲んでください。見やすく整形されます。
jQuery dataTableを利用したテーブルを作成しているのですが、ソート機能が動作せず困っています。
原因についてご教授いただけないでしょうか。
テンプレートエンジンはThymeleafを使用しています。
以下、ソースコード（抜粋）になります。
<script type="text/javascript"> <!-- 検索結果テーブルのjQuery --> jQuery(function($){ $.extend( $.fn.dataTable.defaults, { language: { url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" } }); $("#logs").dataTable({ lengthChange: false, searching: false, ordering: true, info: false, paging: false, scrollX: false, scrollY: 322 }); }); </script> <table id="logs" class="table table-bordered table-condensed table-hover dataTable no-footer"> <thead> <tr class="info"> <th class="text-center">ID</th> <th class="text-center">処理日</th> <th class="text-center">ジョブ名</th> <th class="text-center">タスク名</th> <th class="text-center">処理開始日時</th> <th class="text-center">処理終了日時</th> <th class="text-center">処理ステータス</th> <th class="text-center">ログ内容</th> </tr> </thead> <tbody th:remove="all-but-first" th:each="log : ${batch_log_list}"> <tr> <td class="text-center" th:text="${log.id}"></td> <td class="text-center" th:text="${log.operation_date}"></td> <td class="text-center" th:text="${log.job_name}"></td> <td class="text-center" th:text="${log.task_name}"></td> <td class="text-center" th:text="${log.start_date}"></td> <td class="text-center" th:text="${log.end_date}"></td> <td th:if="${log.operation_status == '正常終了'}" class="text-center font-success" th:text="${log.operation_status}"></td> <td th:if="${log.operation_status != '正常終了'}" class="text-center font-failed" th:text="${log.operation_status}"></td> <td class="text-left" th:utext="${log.log_content}"></td> </tr> </tbody> </table> ★実際に出力されたHTMLコード <table id="logs" class="table table-bordered table-condensed table-hover dataTable no-footer"> <thead> <tr class="info"> <th class="text-center">ID</th> <th class="text-center">処理日</th> <th class="text-center">ジョブ名</th> <th class="text-center">タスク名</th> <th class="text-center">処理開始日時</th> <th class="text-center">処理終了日時</th> <th class="text-center">処理ステータス</th> <th class="text-center">ログ内容</th> </tr> </thead> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">12</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td> <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td> <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">11</td> <td class="text-center" rowspan="1" colspan="1">2017/01/30</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td> <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td> <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">10</td> <td class="text-center" rowspan="1" colspan="1">2017/01/10</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:07</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:59</td> <td class="text-center font-failed" rowspan="1" colspan="1">異常終了</td> <td class="text-left" rowspan="1" colspan="1">dept_auth_msts_sub：ファイルが存在しません。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">9</td> <td class="text-center" rowspan="1" colspan="1">2017/01/01</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:12:11</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:14:15</td> <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td> <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">8</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td> <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td> <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">7</td> <td class="text-center" rowspan="1" colspan="1">2017/01/30</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td> <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td> <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">6</td> <td class="text-center" rowspan="1" colspan="1">2017/01/10</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:07</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:59</td> <td class="text-center font-failed" rowspan="1" colspan="1">異常終了</td> <td class="text-left" rowspan="1" colspan="1">dept_auth_msts_sub：ファイルが存在しません。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">5</td> <td class="text-center" rowspan="1" colspan="1">2017/01/01</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:12:11</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:14:15</td> <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td> <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">4</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td> <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td> <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">3</td> <td class="text-center" rowspan="1" colspan="1">2017/01/30</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td> <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td> <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">2</td> <td class="text-center" rowspan="1" colspan="1">2017/01/10</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:07</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:59</td> <td class="text-center font-failed" rowspan="1" colspan="1">異常終了</td> <td class="text-left" rowspan="1" colspan="1">dept_auth_msts_sub：ファイルが存在しません。</td> </tr> </tbody> <tbody> <tr> <td class="text-center" rowspan="1" colspan="1">1</td> <td class="text-center" rowspan="1" colspan="1">2017/01/01</td> <td class="text-center" rowspan="1" colspan="1">CoreBatch</td> <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:12:11</td> <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:14:15</td> <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td> <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td> </tr> </tbody> </table>
動作しないというのは、ヘッダー部をクリックしても反応しない（ソートがされない）という状況です。
どのカラムでもソートされないという状況は同じですか？
はい。どのカラムをクリックしてもソートされないです。
回答1件
0
ベストアンサー
https://jsfiddle.net/arsvsrxq/1/
質問文の記述をそのままjsFiddleに書いたらソート機能は正しく動いています。原因は別の場所にありそうです。
投稿2017/02/02 08:12
総合スコア9206
masaya_ohashi様
ご回答いただき有難うございます。
tbodyの中身を静的な内容にしたところ確かにソートは動作いたしました。
実際にはcontrollerにて取得したデータ（batch_log_list）をmodel.addAttributeで詰め、
それをth:eachで出力しているのですが、ここに問題がありますでしょうか？
テストした静的な内容とは、実際に一度ページを表示したときにtbodyに詰められたhtmlをコピーして使用されましたか？それともjsFiddleからコピーしてきて使用しましたか？もし後者であれば、差し障りなければ前者の内容を質問文に追記していただけますか？
masaya_ohashi様
ご回答いただき有難うございます。
実際に出力された内容をコピーすることはしていなかったので、試してみたところ、
どうやら各行ごとがtbodyで囲まれている形になっているようです。
ここが怪しい感じがしますが、関係ありますでしょうか？
実際の内容を質問内容に追記いたしました。
th:eachの位置がおかしかったようです・・・
<tbody>ではなく、その下の
<tr th:each="log : ${batch_log_list}">としたところ、正しくソートが動作しました。
初歩的なミスで申し訳ありません。
大変助かりました。有難うございました。
解決してよかったです。
あなたの回答
tips
プレビュー
