まだデータがありません。
JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
当ページのリンクには広告が含まれています。
スポンサーリンク
JSONデータからテーブルを表示するプラグイン「Columns」を紹介します。
jQueryプラグイン「Columns」
このプラグインを使えば、script内に記述したJSONデータや外部JSONファイルからHTMLのテーブルを作成することができます。
しかも！作成したテーブルにはソート、検索、ページャーの機能が付いており、至れり尽くせりのプラグインです。
スポンサーリンク
それでは、デモページのテーブルをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Columns のデモでーす。">
<title>Columns - jQuery Plugin Demo</title>
<link id="style" href="css/classic.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Columns のデモでーす。</h1>
<div id="columns"></div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.columns.min.js"></script>
<script>
$(document).ready(function() {
var json = [
{"年":"1992", "国":"スペイン（Spain）", "都市":"バルセロナ（Barcelona）"},
{"年":"1996", "国":"アメリカ合衆国（United States）", "都市":"アトランタ（Atlanta）"},
{"年":"2000", "国":"オーストラリア（ Australia）", "都市":"シドニー（Sydney）"},
{"年":"2004", "国":"ギリシャ（Greece）", "都市":"アテネ（Athens）"},
{"年":"2008", "国":"中国（China）", "都市":"北京（Beijing）"},
{"年":"2012", "国":"イギリス（United Kingdom）", "都市":"ロンドン（London）"},
{"年":"2016", "国":"ブラジル（Brazil）", "都市":"リオデジャネイロ（Rio de Janeiro）"},
{"年":"2020", "国":"日本（Japan）", "都市":"東京（Tokyo）"}
];
$('#columns').columns({
data:json
});
});
</script>
</body>
</html>
スポンサーリンク