タイガー!タイガー!じれったいぞー!(SE編)

AS400, Java, JavaEE, JSF等の開発、習慣など。日々の気づきをまとめたブログ(備忘録)

【Bootstrap】navbar固定時にDataTablesのfixedHeaderを機能させる

突然ですが、既存アプリのメンテンナンスで、DataTablesのfixedHeaderを取り込もうとしてやってみたところ、機能しませんでした。

アプリ本体は、Bootstrap3を使用(少し古いですが)。

navbar-fixed-top でnavbarを固定している形です。

サンプルコード(変更前)

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta http-equiv="Content-type" content="text/html; charset=utf-8">
       <title>Bootstrap3 - DataTables fixedHeader</title>
       <script src="https://code.jquery.com/jquery-3.5.1.js">
       <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
       <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js" type="text/javascript"></script>
       <script src="https://cdn.datatables.net/fixedheader/3.2.1/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
       <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap.min.css" rel="stylesheet">
       <link href="https://cdn.datatables.net/fixedheader/3.2.1/css/fixedHeader.bootstrap.min.css" rel="stylesheet">

       <script type="text/javascript" class="init">
           jQuery(function ($) {
               var table = $('#example').DataTable( {
                   lengthChange: false,
                   searching: false,
                   paging: false,
                   fixedHeader: true,
                   info: false
               } );
           } );
       </script>
   </head>

    <body style="padding-top:30px;">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="nav navbar-brand">Bootstrap3 dataTables Sample Navi</div>
        </nav>

        <div class="container">
            <div class="page-header">
                <h1>都道府県リスト</h1>
                <div>
                    <table id="example" class="table table-striped table-bordered">
                        <thead>
                            <tr><th>Code</th><th>都道府県名</th><th>県庁所在地</th></tr>
                        </thead>
                        <tbody>
                            <tr><td>1</td><td>北海道</td><td>札幌市</td></tr>
                            <tr><td>2</td><td>青森県</td><td>青森市</td></tr>
                            <tr><td>3</td><td>岩手県</td><td>盛岡市</td></tr>
                            <tr><td>4</td><td>宮城県</td><td>仙台市</td></tr>
                            <tr><td>5</td><td>秋田県</td><td>秋田市</td></tr>
                            <tr><td>6</td><td>山形県</td><td>山形市</td></tr>
                            <tr><td>7</td><td>福島県</td><td>福島市</td></tr>
                            <tr><td>8</td><td>茨城県</td><td>水戸市</td></tr>
                            <tr><td>9</td><td>栃木県</td><td>宇都宮市</td></tr>
                            <tr><td>10</td><td>群馬県</td><td>前橋市</td></tr>
                            <tr><td>11</td><td>埼玉県</td><td>さいたま市</td></tr>
                            <tr><td>12</td><td>千葉県</td><td>千葉市</td></tr>
                            <tr><td>13</td><td>東京都</td><td>新宿区</td></tr>
                            <tr><td>14</td><td>神奈川県</td><td>横浜市</td></tr>
                            <tr><td>15</td><td>新潟県</td><td>新潟市</td></tr>
                            <tr><td>16</td><td>富山県</td><td>富山市</td></tr>
                            <tr><td>17</td><td>石川県</td><td>金沢市</td></tr>
                            <tr><td>18</td><td>福井県</td><td>福井市</td></tr>
                            <tr><td>19</td><td>山梨県</td><td>甲府市</td></tr>
                            <tr><td>20</td><td>長野県</td><td>長野市</td></tr>
                            <tr><td>21</td><td>岐阜県</td><td>岐阜市</td></tr>
                            <tr><td>22</td><td>静岡県</td><td>静岡市</td></tr>
                            <tr><td>23</td><td>愛知県</td><td>名古屋市</td></tr>
                            <tr><td>24</td><td>三重県</td><td>津市</td></tr>
                            <tr><td>25</td><td>滋賀県</td><td>大津市</td></tr>
                            <tr><td>26</td><td>京都府</td><td>京都市</td></tr>
                            <tr><td>27</td><td>大阪府</td><td>大阪市</td></tr>
                            <tr><td>28</td><td>兵庫県</td><td>神戸市</td></tr>
                            <tr><td>29</td><td>奈良県</td><td>奈良市</td></tr>
                            <tr><td>30</td><td>和歌山県</td><td>和歌山市</td></tr>
                            <tr><td>31</td><td>鳥取県</td><td>鳥取市</td></tr>
                            <tr><td>32</td><td>島根県</td><td>松江市</td></tr>
                            <tr><td>33</td><td>岡山県</td><td>岡山市</td></tr>
                            <tr><td>34</td><td>広島県</td><td>広島市</td></tr>
                            <tr><td>35</td><td>山口県</td><td>山口市</td></tr>
                            <tr><td>36</td><td>徳島県</td><td>徳島市</td></tr>
                            <tr><td>37</td><td>香川県</td><td>高松市</td></tr>
                            <tr><td>38</td><td>愛媛県</td><td>松山市</td></tr>
                            <tr><td>39</td><td>高知県</td><td>高知市</td></tr>
                            <tr><td>40</td><td>福岡県</td><td>福岡市</td></tr>
                            <tr><td>41</td><td>佐賀県</td><td>佐賀市</td></tr>
                            <tr><td>42</td><td>長崎県</td><td>長崎市</td></tr>
                            <tr><td>43</td><td>熊本県</td><td>熊本市</td></tr>
                            <tr><td>44</td><td>大分県</td><td>大分市</td></tr>
                            <tr><td>45</td><td>宮崎県</td><td>宮崎市</td></tr>
                            <tr><td>46</td><td>鹿児島県</td><td>鹿児島市</td></tr>
                            <tr><td>47</td><td>沖縄県</td><td>那覇市</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

動作結果(変更前)

navの後ろで、テーブルのヘッダ行が固定化されていました(開発ツールで確認)。

f:id:no14141:20220203164912j:plain


改善方法

navのクラスに、"fh-fixedHeader"を追加することで、

navの下にテーブルのヘッダ行が固定化されるようになりました。

<nav class="navbar navbar-inverse navbar-fixed-top fh-fixedHeader">
    <div class="nav navbar-brand">Bootstrap3 dataTables Sample Navi</div>
</nav>

動作結果(変更後)

f:id:no14141:20220203164920j:plain


まとめ

Bootstrapについて、そこまで詳しくなかったので、勉強になりました。

こうした小さなことであっても、誰かのお役に立てることを信じてアップしておきますね。