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

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

ただいまの
回答率

87.37%

jQueryのDataTableでscrollXを指定するとずれてしまう

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 6,116

score 90

前提・実現したいこと

jQueryのDataTableを使用してテーブルを作成したいです。
もともと作成していたものをタブレットで表示するとヘッダーが固定されてしまい、スクロールされなかったので調べたところ
"ScrollX"にtrueを設定することでヘッダーも同時にスクロールするようになるとのことだったので指定したところ、タブレット側での表示はうまくいきました。
ところが、PC側で画面を見てみると(項目がそんなに多くないのでPCの画面で見るとスクロールは不要)ヘッダー部分とずれが生じてしまいました。
ScrollXを指定して、なおかつずれを解消するにはどうすればよいでしょうか?

該当のソースコード

    $(document).ready(function() {

        $('#inputNew').bootstrapSwitch('state', true);

        searchResultsTable = $('#searchResults').DataTable({
            "autoWidth"     : true,                            // 列の幅の自動補正の有効/無効。
            "deferRender"   : false,                           // テーブルの遅延レンダリングの有効/無効。trueとした場合、必要になるまでテーブル要素の生成を遅延する
            "filter"        : false,                           // データのフィルタリング機能の有効/無効。フィルタリングの入力ボックスは不要だが、フィルタリングの機能は有効にしておきたい場合は true に設定しておく必要がある(DataTable.defaults.sDomを参照)。
            "info"          : true,                            // テーブルのレコードの状態表示の有効/無効。true とした場合、現在のページとレコード総数を表示。
            "lengthChange"  : true,                            // 1ページの表示件数を指定するセレクトメニュー表示の有無。有効にする場合は bPaginate も泡あせて有効にする必要がある。
            "paging"        : true,                            // ページングの有効/無効。(縦スクロールバーを表示する場合はfalse)
            "stateSave"     : true,
            "processing"    : true,
            "serverSide"    : false,                           // サーバ側とsAjaxSourceパラメータを介したAjax処理の有効/無効。
            "scrollY"       : "50vh",                          // 縦スクロールバーを表示する場合
            "scrollX"       : true,
            "scrollCollapse": true,                            // 縦スクロールバーを表示する場合
            "lengthMenu"    : [[100, 50, 10], [100, 50, 10,]], // 1ページの表示件数のセレクトメニューの表示
            "columns"       : [
                                {"data": "d1"},
                                {"data": "d2"},
                                {"data": "d3"},
                                {"data": "d4"},
                                {"data": "d5"},
                                {"data": "d6"},
                                {"data": "d7"},
                                {"data": "d8"},
                                {"data": "d9"}
                              ],
            "columnDefs"    : [
                                {
                                  "targets": 1,
                                  "data"   : "download_link",
                                  "render" : function (data, type, full, meta) {
                                               return '<a href="#">' + data + '</a>';
                                             }
                                },
                                {
                                  "targets": 7,
                                  "visible": false
                                },
                                {
                                  "targets": 8,
                                  "visible": false
                                }
                              ],
            "order"         : [],
            "language"      : {
                                "lengthMenu"  : "1ページ中 _MENU_件表示",
                                "zeroRecords" : "1件も見つかりませんでした。",
                                "info"        : "_MAX_件中_START_から_END_まで(_PAGE_ / _PAGES_ ページ)",
                                "infoEmpty"   : "",
                                "infoFiltered": "(filtered from _MAX_ total records)",
                                "paginate"    : {
                                                  "first"   : "最初へ",
                                                  "previous": "前へ",
                                                  "next"    : "次へ",
                                                  "last"    : "最後へ"
                                                }
                              }
        });
        searchResultsTable.columns.adjust();

        // DataTables表示後にテーブルの表示状態をクリア
        searchResultsTable.state.clear();
    });

試したこと

調べてみたところ

table.columns.adjust();


をすると解消されるということだったので、searchResultsTable.columns.adjust();を入れてみたのですがうまくいきませんでした。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

すみません。
上記のコードに問題はありませんでした。
HTML側でテーブルヘッダーとテーブルボディにstyle="width=100%;"を設定することで解決しました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

関連した質問

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