前提・実現したいこと
SpringBoot、ThymleafそしてDataTablesを用いて、DBのデータを表示させています。すべての列にinputを持たせて、入力されたデータを一括で送信しようとしています。現在、デフォルトの表示のままだったら一括送信が可能なのですが、DataTablesの検索機能や、ページネーションで非表示になっている列の入力値が送信できずに困っています。
そもそも一つのボタンで、隠れている列も含めてすべてのデータを送るのが可能なのか、また可能であればどのような方法があるのか教えていただきたいです。
発生している問題・エラーメッセージ
表示されているデータしか送信されない。 テーブルのinputたタグに入力された数字をsubmitソート登録で一括で送信したいです。
Thymleafのテーブル
<div class="text-left mb-2"> <form th:action="@{/empSort}" method="POST" id="sort" th:object="${empData}"></form> <input type="submit" value="ソート登録" class="btn btn-primary btn ml-3" form="sort"> </div> </div> <!-- 表 --> <!-- datatables --> <table id="example" class="table table-striped table-bordered nowrap" style="width: 100%"> <thead> <tr> <th>ソート順</th> <th>名前</th> </tr> </thead> <tbody> <tr th:each="emp,empList:${empData.userList}"> <td class="text-center"><input type="text" class="form-control" th:name="|userList[${empList.index}].sort_num|" th:value="${emp.sort_num}" pattern="[0-9]|[1-9][1-9]|[1-9][1-9][1-9]" form="sort" required></td> <td th:text=${emp.name}>ユーザー名</td> </tr> </tbody> </table>
DataTables関連のScriptタグ
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script> <script> $(document).ready(function() { var table = $('#example').DataTable({ fixedHeader : true, //カラム列も横スクロールさせたい為Xも指定 //scrollX: true, //検索フォームずれ対策で縦スクロール //scrollY: 500, // responsive: true, // 初期表示件数 //displayLength: - 1, // 表示できる件数 }); }); // デフォルトの設定を変更 $.extend($.fn.dataTable.defaults, { language : { "sProcessing" : "処理中...", "sLengthMenu" : "_MENU_ 件表示", "sZeroRecords" : "データはありません。", "sInfo" : " _TOTAL_ 件中 _START_ から _END_ まで表示", "sInfoEmpty" : " 0 件中 0 から 0 まで表示", "sInfoFiltered" : "(全 _MAX_ 件より抽出)", "sInfoPostFix" : "", "sSearch" : "検索:", "sUrl" : "", "oPaginate" : { "sFirst" : "先頭", "sPrevious" : "前", "sNext" : "次", "sLast" : "最終" } } }); </script>
よろしくお願いいたします。
あなたの回答
tips
プレビュー