[DataTableライブラリ] テーブル内容を検索する
説明
DataTableライブラリでテーブル内容を検索するにはテーブルタグに対してdataTable()メソッドを呼び出します。検索ボックスなどは自動的に生成されます。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>DataTablesサンプル</h1>
<table id="myTable" border="1" width="400" cellspacing="0" cellpadding="2">
<thead>
<tr><th>商品名</th><th>価格(円)</th></tr>
</thead>
<tbody>
<tr><td>おいしいヨーグルト</td><td>95</td></tr>
<tr><td>なめらかヨーグルト</td><td>75</td></tr>
<tr><td>おいしいプリン</td><td>105</td></tr>
<tr><td>なめらかイチゴ</td><td>115</td></tr>
<tr><td>おいしいメロン</td><td>125</td></tr>
<tr><td>なめらかバナナ</td><td>95</td></tr>
<tr><td>激しいヨーグルト</td><td>135</td></tr>
<tr><td>鬱金ヨーグルト</td><td>125</td></tr>
</tbody>
</table>
</body>
</html>
【sample.js】
$(function(){
$("#myTable").dataTable();
});