Spring Boot+Datatablesを使用した開発手順
Datatablesを使うための設定には、実際にはSpring BootやThymeleafと連携する個所はほぼありません。
複数の手順を踏んで設定する必要があるので一見大変そうですが、 純粋にHTMLとJavaScriptとCSSの世界で完結しているので、一つずつやれば難しくはありません。

[1] CDNの参照

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.2/css/dataTables.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/2.1.2/js/dataTables.min.js"></script>
<!-- テーブルの選択機能を持たせるには以下のSELECT拡張が必要 -->
<link rel="stylesheet" href="https://cdn.datatables.net/select/2.0.3/css/select.dataTables.min.css"/> 
<script src="https://cdn.datatables.net/select/2.0.3/js/dataTables.select.min.js"></script>

DataTablesを使うにはjQueryも必須です。
またDataTablesのSELECT拡張という、テーブルをクリックすると反応するJavaScript処理を記述できる拡張もあります。
これらは全てCDNで読み込み可能です。
なお、Datatablesではヘッダ行を固定してデータ行を縦スクロールまたはページ渡りで表示する機能は内蔵され、 デフォルトで有効になっていますが、一部の列を固定して他の列を横スクロールするには、 FixedColumnsという拡張機能が必要になります。 それを試した例はこちらに記載しています。

[2] Datatablesの作成

<script>
jQuery(function($){
    var table1 = $("#table1").DataTable({
      "displayLength": 10,
      "select" : true,
      "language": {"url" : "https://cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Japanese.json"},
    });

    // ★この後ろの部分に後述の処理を適宜追加します。

});
</script>

対象のTABLE要素、ここでは#table1に対して、DataTable()で初期化すればDatatablesが有効になります。
引数にはDatatablesの様々な動作に関する設定が渡せます。 "select"はSELECT拡張を有効にする設定、"language"は日本語で表示する設定にしています。

[3] テーブルの外観の調整
CSSを使って普通に記述すればOKです。 ここはDatatablesに直接関係しない見栄えの調整なので、特に言う事はないでしょう。 

<style>
/* 行の高さを縮める */
#table1 thead td{
    padding-top: 1px;
    padding-bottom: 1px;
}
#table1 tbody td{
    padding-top: 1px;
    padding-bottom: 1px;
}

/* 行の背景色 */
#table1 thead tr {
    background-color: #CCCCCC;
}
#table1 tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
}
#table1 tbody tr:nth-child(even) {
    background-color: #EEEEEE;
}

/* 枠線 */
#table1 thead td:first-child {
    border-top:   1px solid #404040;
    border-left:  1px solid #404040;
}
#table1 thead td{
    border-top:   1px solid #404040;
    border-right: 1px solid #404040;
}

#table1 tbody td:first-child {
    border-left:   1px solid #404040;
    border-bottom: 1px solid #404040;
}
#table1 tbody td {
    border-right:  1px solid #404040;
    border-bottom: 1px solid #404040;
}
</style>

[4] テーブルの記述
TABLE要素の記述です。ここも大きな注意点はありませんが、colspan、rowspanは避けた方が良いようです。
またthead、tbodyは省略せずに書いた方が良いと思います。 

<table id="table1" class="table table-bordered">
  <thead>
    <tr>
        <th>支店コード</th>
        <th>支店名称</th>
        <th>地域</th>
        <th>地域名称</th>
        <th>所在地</th>
        <th>従業員数</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="e: ${shitenList}">
        <td th:text="${e.shitenCode}"></td>
        <td th:text="${e.shitenName}"></td>
        <td th:text="${e.areaCode}"></td>
        <td th:text="${e.areaName}"></td>
        <td th:text="${e.address}"></td>
        <td th:text="${e.employeeNum}"></td>
    </tr>
  </tbody>
</table>

[5] テーブルの行をクリックした際の動作を記述する
TABLE要素 #table1 のTR要素がクリックされたときのJavaScript処理を次のように記述する中で、 クリックされた行の情報をこのように取り出せます。
取り出して何をするんです？ 例えばこの例のように「選択行の値を編集フォームの各入力欄にコピーする」などの処理が考えられます。 

    // テーブルの行をクリックしたときの処理⇒編集フォームに値をコピーします。
    $("#table1").on('click', 'tbody tr', function (e) {
        var rowdata = table1.row($(this)).data();
        //alert("Selected:[" + rowdata + ']');
        // 支店コードはrowdata[0]で取得できる

        var f = document.getElementById("editForm");
        f.shitenCode.value  = rowdata[0];
        f.shitenName.value  = rowdata[1];
        f.areaCode.value    = rowdata[2];
        // ...
    });

[6] ボタンイベントなどの中でテーブルの選択行を参照する
テーブルと同じページにあるボタンなどを押した際のJavaScriptで、テーブルの選択行の値を参照できます。
何に使うんです？以下の例では「選択行を削除」(#deletebutton1)というボタンがクリックされた際の処理を記述しており、 選択行のキー項目であるshitenCodeを削除コール用隠しフォーム deleteForm の shitenCodeプロパティにコピー後、 同フォームをSubmitしています。 

    document.querySelector('#deletebutton1').addEventListener('click', function () {
        var rows = table1.rows('.selected').data();
        if(rows.length === 0){
            alert("レコードが選択されていません。");
        } else {
            var shitenCode = rows[0][0];
            var shitenName = rows[0][1];
            if(confirm(shitenCode + "(" + shitenName + ")を削除します。よろしいですか？")){
                var f = document.getElementById("deleteForm");
                f.shitenCode.value = shitenCode;
                f.submit();
            }
        }
    });

Java kowaza Top

(first uploaded 2024/08/04 last updated 2025/01/04, URANO398)