検索/ソート/ページャー/フィルター付きのテーブル「Bootgrid」
当ページのリンクには広告が含まれています。
スポンサーリンク
検索・ソート・ページャー・フィルター付きのテーブルを実装するプラグイン「Bootgrid」を紹介します。
jQueryプラグイン「Bootgrid」
このプラグインを使えば、テーブルの項目を検索、項目ごとのソート、項目が多い場合にページ分けするページャー、どの項目を表示するかを選択するフィルターといった高機能テーブルを実装することができます。
また、スタイルシートには Bootstrap を利用しているので、どんなサイトにマッチしそうですね。
スポンサーリンク
それではデモページのテーブルをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Bootgrid のデモでーす。">
<title>Bootgrid - jQuery Plugin Demo</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/jquery.bootgrid.css" rel="stylesheet" />
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/bootgrid/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>Bootgrid のデモ。</h1>
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="namae">名前</th>
<th data-column-id="received" data-order="desc">メール</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>たろう</td>
<td>taro@gmail.co</td>
</tr>
<tr>
<td>2</td>
<td>じろう</td>
<td>jiro@gmail.co</td>
</tr>
<tr>
<td>3</td>
<td>さぶろう</td>
<td>36@gmail.co</td>
</tr>
<tr>
<td>4</td>
<td>たけし</td>
<td>take@gmail.co</td>
</tr>
<tr>
<td>5</td>
<td>佐藤</td>
<td>suger@icloud.com</td>
</tr>
<tr>
<td>6</td>
<td>高橋</td>
<td>taka@gmail.co</td>
</tr>
<tr>
<td>7</td>
<td>伊藤</td>
<td>i10@gmail.co</td>
</tr>
<tr>
<td>8</td>
<td>渡辺</td>
<td>watanabe@gmail.co</td>
</tr>
<tr>
<td>8</td>
<td>渡辺</td>
<td>watanabe@gmail.co</td>
</tr>
<tr>
<td>9</td>
<td>小林</td>
<td>koba@gmail.co</td>
</tr>
<tr>
<td>10</td>
<td>吉田</td>
<td>yosi@gmail.co</td>
</tr>
<tr>
<td>11</td>
<td>松本</td>
<td>mat@gmail.co</td>
</tr>
<tr>
<td>13</td>
<td>佐々木</td>
<td>s@gmail.co</td>
</tr>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.bootgrid.js"></script>
<script>
$(function() {
$("#grid-basic").bootgrid();
});
</script>
</body>
</html>
スポンサーリンク