勉強したことのメモ

webプログラマが勉強したことのメモ。

tableのフィルター機能

      2014/07/02

jQueryプラグインで簡単にフィルター機能が

つけられたのでメモ。

■必要なもの

http://sunnywalker.github.io/jQuery.FilterTable/

■使い方

jQueryプラグイン読み込む。

$('table').filterTable({quickList:['class','tag']});を記述。

<tbody>と<thead>をつけとかないと検索に巻き込まれることがあるので注意。

■サンプル

http://sample.taitan916.info/filter_table/

■ソース

<?
function makeRandStr($length) {
$r_str = '';
$str = array_merge(range('a', 'z'), range('0', '9'), range('A', 'Z"'));
for ($x = 0; $x < $length; $x++) {
$r_str .= $str[rand(0, count($str)-1)];
}
return $r_str;
}
?>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="./jquery.filtertable.min.js"></script><!--ライブラリを読み込む-->
<script>
$(function(){
$('table').filterTable({quickList:['class','tag']}); //quickListで好きなものを指定できる
});
</script>
<style>
.filter-table .quick { /*quickListのスタイル*/
margin-left: 0.5em;
font-size: 0.8em;
text-decoration: none;
}
td.alt { /*ソートで出てきたやつの色づけ*/
background-color: #ffc;
background-color: rgba(255, 255, 0, 0.2);
}
</style>
<title>filtertableのテスト</title>
</head>
<body>
<h1>filtertableのテスト</h1>
<table>

<thead>
<tr>
<th>seq</th>
<th>str</th>
<th>quickList</th>
</tr>

</thead>

<tbody>
<? for ($i = 0; $i <= 30; $i++) : ?>
<tr class="visible" style="display: table-row;">
<td><?=$i;?></td>
<td><?=makeRandStr(7);?></td><!--strのとこはランダム英数7文字-->
<td><?=($i % 2 == 0) ? 'class' : 'tag';?></td><!--偶数行はclassをつけて、気数行はtagをつける-->
</tr>
<? endfor ;?>

</tbody>
</table>
</body>
</html>

//20130612追記

導入しようとしてはまったのでメモ。

デフォでは8? か9行ぐらいtrが無いとフィルターの

テキストボックスが表示されない、というのが原因。

$("#result_table").filterTable({minRows : 1});

として指定することで1行以上で表示されるっぽい。

 - jQuery

  関連記事

jQueryでのやりたい事

フォーム周りをよく使うのでまとめておく。 ・テキストボックスのvalue取得、書 ...

jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

jQuery Alert Dialogsで表示後に処理したい

最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...

他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

jQueryで要素のleftやwidthを取得

jQueryで要素のposition(leftやtop)とwidthとheigh ...

jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...