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

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

ただいまの
回答率

87.49%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 522

score 6

前提・実現したいこと

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>

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る