JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー

当ページのリンクには広告が含まれています。

jQuery Plugin » テーブル » JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー

JSONデータからテーブルを表示するプラグイン「Columns」を紹介します。

jQueryプラグイン「Columns」

このプラグインを使えば、script内に記述したJSONデータや外部JSONファイルからHTMLのテーブルを作成することができます。

しかも！作成したテーブルにはソート、検索、ページャーの機能が付いており、至れり尽くせりのプラグインです。

それでは、デモページのテーブルをご覧ください。

「Columns」のデモ

ソース（ 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>

Columns

jQueryプラグイン「Columns」

ソース（ HTML + jQuery ）

関連記事（一部広告含む）