ywork2020.com

Title

データテーブルでデータベースを作成する

目次 (INDEX)

DataTables の概要

DataTables は SpryMedia Ltd によって設計され、作成されたデータテーブルです。
Web ページにデータテーブルを実装するには jQuery を使います。

jQuery のデータファイルを自分のサーバに置くか、CDNから読み込む必要があります。 次のセクションでは CDN から jQuery と CSS を読み込む方法を紹介します。

目次に戻る

DataTables を CDN から読み込む

この記事を書いている時点でのバージョン情報が含まれているコードです。
バージョンについては 公式ページ ( https://www.datatables.net/ ) での確認をお願いします。

尚、このコードは head セクション内に記述します。

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"/>
</head>

目次に戻る

HTML 内のテーブルデータを利用した DataTables の動作サンプル

No都道府県県庁所在地地方
1北海道札幌市北海道
2青森県青森市東北
3岩手県盛岡市東北
4宮城県仙台市東北
5秋田県秋田市東北
6山形県山形市東北
7福島県福島市東北
8茨城県水戸市関東
9栃木県宇都宮市関東
10群馬県前橋市関東
11埼玉県さいたま市関東
12千葉県千葉市関東
13東京都東京市関東
14神奈川県横浜市関東
47沖縄県那覇市沖縄

目次に戻る

HTML 内のテーブルデータを利用した DataTables のサンプルコード

<style>
	#foo-table1{
		border-collapse: collapse;
	}
	#foo-table1 th, #foo-table1 td{
		border: thin solid ##lightgray;
		border-collapse: collapse;
		padding: 5px;
		text-align: left;
	}
</style>
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title> jQuery : DataTables </title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"/>
		<style>
			...
		</style>
	</head>
	<body>
		<table id="foo-table1" class ="table table-bordered">
			<thead>
				<tr><th>No</th><th>都道府県</th><th>県庁所在地</th><th>地方</th></tr>
			</thead>
			<tbody>
				<tr><td>1</td><td>北海道</td><td>札幌市</td><td>北海道</td></tr>
				<tr><td>2</td><td>青森県</td><td>青森市</td><td>東北</td></tr>
				<tr><td>3</td><td>岩手県</td><td>盛岡市</td><td>東北</td></tr>
				<tr><td>4</td><td>宮城県</td><td>仙台市</td><td>東北</td></tr>
				<tr><td>5</td><td>秋田県</td><td>秋田市</td><td>東北</td></tr>
				<tr><td>6</td><td>山形県</td><td>山形市</td><td>東北</td></tr>
				<tr><td>7</td><td>福島県</td><td>福島市</td><td>東北</td></tr>
				<tr><td>8</td><td>茨城県</td><td>水戸市</td><td>関東</td></tr>
				<tr><td>9</td><td>栃木県</td><td>宇都宮市</td><td>関東</td></tr>
				<tr><td>10</td><td>群馬県</td><td>前橋市</td><td>関東</td></tr>
				<tr><td>11</td><td>埼玉県</td><td>さいたま市</td><td>関東</td></tr>
				<tr><td>12</td><td>千葉県</td><td>千葉市</td><td>関東</td></tr>
				<tr><td>13</td><td>東京都</td><td>東京市</td><td>関東</td></tr>
				<tr><td>14</td><td>神奈川県</td><td>横浜市</td><td>関東</td></tr>
				<tr><td>47</td><td>沖縄県</td><td>那覇市</td><td>沖縄</td></tr>
			</tbody>
		</table>
		<script>
			...
		</script>
	</body>
</html>
<script>
	jQuery(function($){ 
		// 日本語にデフォルト設定
		$.extend( $.fn.dataTable.defaults, { 
			language: {
				url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
			} 
		});
		$("#foo-table1").DataTable({});
	});
</script>

目次に戻る

外部の json ファイルを読み込んだ DataTables の動作サンプル

No都道府県県庁所在地地方

目次に戻る

外部の json ファイルを読み込んだ DataTables のサンプルコード

<style>
	#foo-table2{
		border-collapse: collapse;
	}
	#foo-table2 th, #foo-table2 td{
		border: thin solid ##lightgray;
		border-collapse: collapse;
		padding: 5px;
		text-align: left;
	}
</style>
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title> jQuery : DataTables </title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"/>
		<style>
			...
		</style>
	</head>
	<body>
		<table id="foo-table2" class ="table table-bordered">
			<thead>
				<tr><th>No</th><th>都道府県</th><th>県庁所在地</th><th>地方</th></tr>
			</thead>
		</table>
		<script>
			...
		</script>
	</body>
</html>
<script>
	jQuery(function($){ 
		// 日本語にデフォルト設定
		$.extend( $.fn.dataTable.defaults, { 
			language: {
				url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
			} 
		});
		$("#foo-table2").DataTable({
			ajax: { url: "../json/json-datatables-sample.json", dataSrc: '' },
			columns: [
				{ data: "No" },
				{ data: "Field1" },
				{ data: "Field2" },
				{ data: "Field3" }
			]
		});
	});
</script>

外部 json ファイルの内容

[
    { "No":1, "Field1": "北海道", "Field2":"札幌市", "Field3":"北海道" },
    { "No":2, "Field1": "青森県", "Field2":"青森市", "Field3":"東北" },
    { "No":3, "Field1": "岩手県", "Field2":"盛岡市", "Field3":"東北" },
    { "No":4, "Field1": "宮城県", "Field2":"仙台市", "Field3":"東北" },
    { "No":5, "Field1": "秋田県", "Field2":"秋田市", "Field3":"東北" },
    { "No":6, "Field1": "山形県", "Field2":"山形市", "Field3":"東北" },
    { "No":7, "Field1": "福島県", "Field2":"福島市", "Field3":"東北" },
    { "No":8, "Field1": "茨城県", "Field2":"水戸市", "Field3":"関東" },
    { "No":9, "Field1": "栃木県", "Field2":"宇都宮市", "Field3":"関東" },
    { "No":10, "Field1": "群馬県", "Field2":"前橋市", "Field3":"関東" },
    { "No":47, "Field1": "沖縄県", "Field2":"那覇市", "Field3":"沖縄" }
]

目次に戻る