質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

0回答

1380閲覧

DataTablesの、見えていない列のデータも送信したい

kazu5942

総合スコア6

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2020/10/22 02:41

前提・実現したいこと

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>

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問