概要
JSON形式のデータをHTMLのTableタグに表示する内容です。
TableのレイアウトはBootstrapを利用します。
ソース
下記のHTMLソースをコピーし、HTMLファイルに保存します。
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>テーブルサンプル</title>
</head>
<body>
<h1 class="my-3 ml-3">テーブル</h1>
<div class="col-5 ml-3">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>氏名</th>
<th>得意言語</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>エンジニア1</td>
<td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>エンジニア2</td>
<td>Ruby</td>
</tr>
<tr>
<td>3</td>
<td>エンジニア3</td>
<td>VBA</td>
</tr>
<tr>
<td>4</td>
<td>エンジニア4</td>
<td>JAVA</td>
</tr>
<tr>
<td>5</td>
<td>エンジニア5</td>
<td>Python</td>
</tr>
</tbody>
</table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
ブラウザで確認
上記のHTML内容は以下のように表示されます。
Bootstrapのレイアウト
下記の参照サイトから好きなタイプのTableレイアウトをコピーして、上記のHTMLファイルに貼り付けます。
■参照サイト
・参照したソース
https://www.sejuku.net/blog/81660
・BootStrapV5.0
https://getbootstrap.jp/docs/5.0/content/tables/
・BootStrapV4.3
https://getbootstrap.jp/docs/4.3/content/tables/
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script type="text/javascript">
var jsonData = [
{ "col1":"value1-1", "col2":"value1-2", "col3":"value1-3"}
, { "col1":"value2-1", "col2":"value2-2", "col3":"value2-3"}
, { "col1":"value3-1", "col2":"value3-2", "col3":"value3-3"}
];
$(function() {
$("#data-bind-json-sample").DataTable({
//"language": {"url":"https://cdn.datatables.net/plug-ins/1.11.3/i18n/ja.json"},
data: jsonData
, columns: [
{ data: 'col1' },
{ data: 'col2' },
{ data: 'col3' }
],
paging: false,
searching: false,
});
})
</script>
<title>テーブルサンプル</title>
</head>
<body>
<h1 class="my-3 ml-3">テーブル</h1>
<div class="col-5 ml-3">
<table class="table table-striped" id="data-bind-json-sample">
<thead>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
テーブル表示
上記のソースで下記のClassのみ変更するとレイアウトが変更されることが分かります。
ページング処理も表示は可能ですが、現在Falseに指定しています。
※languageのオプションですが、うまく動かないので、コメントアウトしました。
class="table table-striped table-dark"
■変更前
■変更後
終わりに
今日はJSON形式であるデータをTableタグにバインドして表示してみました。
まだDataTableにオプションが多くりますので、必要に応じて追加してみてください。
以上！！！
↧