Datatablesのデータの受け渡しの仕方がわからない

前提・実現したいこと

Datatablesを使ってテーブルの表示をしたいです。

発生している問題・エラーメッセージ

jQuery DataTables の使い方を見ながら使い方を学んでいたのですが
ここで一つわからないことがあります。

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"/>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
<body>
  <!-- 追加のCSS -->
  <style>

  </style>

  <table class='table table-stripe' id="lingTable">
    <thead>
      <tr><th>#</th><th>日本語</th><th>英語</th>
        <th>品詞</th></tr>
    </thead>
  </table>

  <!-- dataTables bootstrap4を使うためのJSファイル -->
  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
  <!-- 独自定義JS -->
  <script type="text/javascript">
    const lingData=[
      {id:1,japanese:"走る",english:"run",pos:"動詞"},
      {id:2,japanese:"歩く",english:"walk",pos:"動詞"},
      {id:3,japanese:"鉛筆",english:"pencil",pos:"名詞"},
      {id:4,japanese:"夢",english:"dream",pos:"名詞"},
    ]
    const dtSetting={
       destroy: true,
       data: lingData,
       language: {
         url: "https://cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Japanese.json"
       },
       columns: [
         {data:"id"},
         { data: "japanese"},
         { data: "english"},
         { data: "pos"}
       ]
    };
    $('#lingTable').DataTable(dtSetting);
  </script>
</body>
</html>

このサンプルコードのうち

<script type="text/javascript">
    const lingData=[
      {id:1,japanese:"走る",english:"run",pos:"動詞"},
      {id:2,japanese:"歩く",english:"walk",pos:"動詞"},
      {id:3,japanese:"鉛筆",english:"pencil",pos:"名詞"},
      {id:4,japanese:"夢",english:"dream",pos:"名詞"},
    ]
    const dtSetting={
       destroy: true,
       data: lingData,
       language: {
         url: "https://cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Japanese.json"
       },
       columns: [
         {data:"id"},
         { data: "japanese"},
         { data: "english"},
         { data: "pos"}
       ]
    };
    $('#lingTable').DataTable(dtSetting);
  </script>

ここの部分なのですが
たとえばこのHTMLを読み込む前にJava側のコントローラーで

List<KotobaBean> list = new ArrayList<KotobaBean>();
KotobaBean kotoba1 = new KotobaBean();
kotoba1.setId("1");
kotoba1.setJapanese("走る");
kotoba1.setEnglish("run");
kotoba1.setPos("動詞");
list.add(kotoba1);

// 省略：上記を3つ分繰り返す 

modelAttributes.addAttribute("list", list);

のように値を渡した場合、columnsにはどのように値を設定すればよいのでしょうか？
わかる方がいらっしゃったら教えてほしいです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

のように値を渡した場合、columnsにはどのように値を設定すればよいのでしょうか？

設定したいのはlingDataのことだと思いましたので、その前提で回答致します。
thymeleafのテンプレートファイルで以下のように記述するとコントローラから渡されるデータをJavaScriptのデータとしてレンダリングできます。

javascript
1<script type="text/javascript" th:inline="javascript">
2    /*<![CDATA[*/
3    const lingData = /*[[ ${list} ]]*/ [];
4    /*]]>*/
5
6    // 省略
7
8 </script>

chromeのdev toolsで確認すると下記のようにレンダリングされていると思います。
JSONの仕様によりフィールド名がダブルクォーテーションで囲まれています。
また日本語のデータはUnicodeで表現されています。（ブラウザによって見え方が違うようでEdgeだと日本語して読める状態でした）

const lingData = [{"id":1,"japanese":"\u8D70\u308B","english":"run","pos":"\u52D5\u8A5E"},{"id":2,"japanese":"\u6B69\u304F","english":"walk","pos":"\u52D5\u8A5E"},{"id":3,"japanese":"\u925B\u7B46","english":"pencil","pos":"\u540D\u8A5E"},{"id":4,"japanese":"\u5922","english":"dream","pos":"\u540D\u8A5E"}];

空のコレクションを渡した場合は下記のようになります。