今日の人気記事

  1. 入力フォームのフォーカスを自動でタブ移動「Autotab」

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>
スポンサーリンク

関連記事(一部広告含む)