Posted at

テーブルの内容をフィルタリング検索するjQueryプラグイン

More than 3 years have passed since last update.

キー入力でリアルタイムにテーブルの絞込検索。


js/quicktablefilter.js

// QuickTableFilter.js

( function ( $ ) {
$.fn.quickTableFilter = function ( searchBox, options ) {

// オプション初期化
var settings = $.extend( {
}, options );

// -----------------------------

// プラグイン本文記述

return this.each(function (){
var $this = $(this),
$search = $(searchBox),
originalHtml = $(this).html(),
headerHtml = "",
hasTbody = false;

// thead を含む場合
if ( $this.find("thead").length){
headerHtml = $(this).find("thead").html();
}

// tbody を含む場合、hasTbodyを有効化
if( $this.find("tbody").length){
hasTbody = true;
originalHtml = $(this).find("tbody").html();
}

// 検索ボックスに変更があった場合の処理
$search.keyup( function () {
var timer;
timer = setTimeout(function(){
$this.html(refineTable (originalHtml, $search.val(), hasTbody,headerHtml))
},150);
});

// todo: 関数: 絞込テーブル生成
function refineTable (tableHtml, strSearch, hasTbody, headerHtml){
var htmlGenerateTable ="",
strSearchExp = new RegExp(strSearch,"i");

if (headerHtml !== ""){
htmlGenerateTable += "<thead>" + headerHtml + "</thead>";
}

if(strSearch == ""){
// 検索文字列がない場合

if (hasTbody){
htmlGenerateTable += "<tbody>" + tableHtml + "</tbody>";
} else {
htmlGenerateTable += tableHtml;
}

return htmlGenerateTable;
} else {
// 検索文字列がある場合

$(tableHtml).each(function(){
if(strSearchExp.test($(this).text())){
htmlGenerateTable += "<tr>" + $(this).html() + "</tr>";
} else {
return true;
}
});
return htmlGenerateTable;
}
}
});
}
} ( jQuery ) );



js/main.js

$(function(){

$("#target").quickTableFilter("#search");
});


index.html

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="search" id="search">
<table id="target">
<thead>
<tr>
<th>foo</th>
<th>bar</th>
<th>bazz</th>
</tr>
</thead>
<tbody>
<tr>
<td>hoge</td>
<td>fuga</td>
<td>piyo</td>
</tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td>dolor</td>
</tr>
</table>

<script src="js/quicktablefilter.js"></script>
<script src="js/main.js"></script>
</body>
</html>