この記事は2年以上前に書かれたものです。
情報が古い可能性があります。
情報が古い可能性があります。
CSSや画像を使って自分でデザイン性のあるテーブルを作成するのも一つの手ですが、こういったプラグインは沢山ありますので使用してみてはいかがでしょうか。
簡単な使い方
jQuery本体及び flexigrid.pack.js と flexigrid.pack.css を読み込みます。
対象となるテーブルにclassまたはidを付与し、その要素に対してjQueryの記述でflexigrid()メソッドを使用します。
対象となるテーブルには thead 及び tbody が必須になりますのでご注意ください。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.pack.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/flexigrid.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.flexme').flexigrid();
});
</script>
</head>
<body>
<table class="flexme">
<thead>
<tr>
<th width="100">Col 1</th>
<th width="100">Col 2</th>
<th width="100">Col 3 is a long header name</th>
<th width="300">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is data 1 with overflowing content</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
実行結果
サーバサイドからXMLまたはJSON形式でデータを返すようにするとオプションでソートなども可能になるみたいです。
