jQuery pluginテーブルソート、テーブル操作
- jQuery quickSearch plug-in〔要素のデータを簡易検索〕
- Table Drag and Drop JQuery plugin〔テーブルの行全体をドラッグ&ドロップ〕
- tablesorter〔柔軟なクライアント・サイドテーブルソート〕
jQuery quickSearch plug-in
要素のデータを簡易検索
2009/2/23
jQuery quickSearch plug-in
jquery.js、jquery.quicksearch.js
テーブル、リスト、段落など要素内のデータを簡易検索するjQueryプラグイン。
指定した文字列にマッチしたデータを持つ要素だけを絞り込んで表示することができます。 オプションのパラメータで簡単にカスタマイズすることができます。

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery quickSearch plug-in | 設置サンプル</title> <link rel="stylesheet" href="/content/lib/global.css" type="text/css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script src="/content/lib/jquery/jquery.quicksearch.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('table#table_exp tbody tr').quicksearch({ position: 'before', attached: 'table#table_exp', stripeRowClass: ['odd', 'even'], labelText: 'データ検索:' }); $('ul#list_exp li').quicksearch({ position: 'before', attached: 'ul#list_exp', loaderText: '', delay: 100, labelText: 'データ検索:' }); }); </script> <!-- CSS --> <style type="text/css"> table { border:1px solid #ccc; border-spacing:0; border-collapse:collapse; margin:1em 0; padding:0; } thead th { background-color:#333; color:#fff; } th, td { border-bottom:1px solid #ccc; text-align:left; } .right { text-align:right; } .odd { background-color:#fff; } .even { background-color:#eee; } </style> </head> <body> <div id="wrap"> <h1><a href='http://rikrikrik.com/jquery/quicksearch/'>jQuery quickSearch plug-in</a> | 設置サンプル</h1> <p>▼入力したテキストにマッチするデータに絞り込んで表示します。</p> <!-- CODE --> <h2>例:テーブルデータの簡易検索</h4> <table id="table_exp"> <thead> <tr> <th colspan="2">ブラウザ</th> <th>アクセス数</th> <th>アクセス総数に占める割合</th> </tr> </thead> <tbody> <tr><td>Firefox</td><td>ファイヤーフォックス</td><td class="right">1484</td><td class="right">32.42%</td></tr> <tr><td>Internet Exploer 6</td><td>インターネットエクスプローラ 6</td><td class="right">1449</td><td class="right">31.65%</td></tr> <tr><td>Internet Exploer 7</td><td>インターネットエクスプローラ 7</td><td class="right">1269</td><td class="right">27.72%</td></tr> <tr><td>Safari</td><td>サファリ</td><td class="right">165</td><td class="right">3.6%</td></tr> <tr><td>Google Chrome</td><td>グーグルクローム</td><td class="right">97</td><td class="right">2.12%</td></tr> <tr><td>Opera</td><td>オペラ</td><td class="right">93</td><td class="right">2.03%</td></tr> <tr><td>iMODE</td><td>アイモード</td><td class="right">5</td><td class="right">0.11%</td></tr> <tr><td>iPhone</td><td>アイフォン</td><td class="right">5</td><td class="right">0.11%</td></tr> <tr><td>Internet Exploer 5.5</td><td>インターネットエクスプローラ 5.5</td><td class="right">3</td><td class="right">0.07%</td></tr> <tr><td>Mozilla</td><td>モジラ</td><td class="right">3</td><td class="right">0.07%</td></tr> <tr><td>NetScape7.x</td><td>ネットスケープ 7.x</td><td class="right">2</td><td class="right">0.04%</td></tr> <tr><td>Internet Exploer 8</td><td>インターネットエクスプローラ 8</td><td class="right">1</td><td class="right">0.02%</td></tr> <tr><td>Sleipnir</td><td>スレイプニル</td><td class="right">1</td><td class="right">0.02%</td></tr> <tr><td>Softbank</td><td>ソフトバンク</td><td class="right">1</td><td class="right">0.02%</td></tr> </tbody> </table> <h2>例:リストデータの簡易検索</h4> <ul id="list_exp"> <li>Firefox</li> <li>Google Chrome</li> <li>Internet Exploer</li> <li>Mozilla</li> <li>Netscape</li> <li>iMODE</li> <li>Safari</li> <li>Sleipnir</li> <li>Softbank</li> </ul> <!-- CODE / --> </div> </body> </html>
Table Drag and Drop JQuery plugin
テーブルの行全体をドラッグ&ドロップ
2009/4/5
Table Drag and Drop JQuery plugin
[JS]jquery.js v1.2+、jquery.tablednd.js v0.5
[PHP]ajaxTest.php(並び順取得用)
[PHP]ajaxTest.php(並び順取得用)
テーブルの行全体をドラッグ&ドロップで入れ替え可能にするjQueryプラグイン。
ドラッグが開始された行、ドラッグ&ドロップされた後の並び順などを取得することができます。 またtr要素にnodropクラスを指定すると、そのtr要素上に他の行をドロップ不可にし、tr要素にnodragクラスを指定すると、その行全体をドラッグ不可にします。

設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>Table Drag and Drop JQuery plugin | 設置サンプル</title> <link rel="stylesheet" href="/content/lib/global.css" type="text/css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery.tablednd_0_5.js"></script> <script type="text/javascript"> $(function() { /*************** 例1 */ $("#table-1").tableDnD(); /* 初期化 */ /*************** 例2 */ $("#table-2 tr:even").addClass("alt"); /* ストライプ効果 */ /* dragClassクラスとアラート表示するonDrop関数を指定 */ $("#table-2").tableDnD({ onDragClass: "myDragClass", onDrop: function(table, row) { var rows = table.tBodies[0].rows; var debugStr = ""+row.id+"がドラッグ&ドロップされました。現在の並び順は「"; for (var i=0; i<rows.length; i++) { debugStr += rows[i].id+" "; } debugStr+="」です。"; $("#debugArea").html(debugStr); }, onDragStart: function(table, row) { $("#debugArea").html("ドラッグが開始された行:"+row.id); } }); /*************** 例3 */ $('#table-3').tableDnD({ onDrop: function(table, row) { alert("Result of $.tableDnD.serialise() is "+$.tableDnD.serialize()); $('#AjaxResult').load("/module/include/ajax/jquery_plugin_tablesort/ajaxTest.php?"+$.tableDnD.serialize()); } }); /*************** 例4 */ $('#table-4').tableDnD(); /*************** 例5 */ $('#table-5').tableDnD({ onDrop: function(table, row) { alert($('#table-5').tableDnDSerialize()); }, dragHandle: "dragHandle" }); $("#table-5 tr").hover(function() { $(this.cells[0]).addClass('showDragHandle'); }, function() { $(this.cells[0]).removeClass('showDragHandle'); }); }); </script> <!-- CSS --> <style type="text/css"> .demo { background-color:#fff; border:1px solid #666699; margin-right:10px; padding:6px; width:700px; } .demo table { border:1px solid #ccc; border-spacing:0; border-collapse:collapse; } .demo th, .demo td { border:1px solid #ccc; background-color:#fff; padding:3px; } .alt td { background-color:#ecf6fc;} /* for 例2 */ td.showDragHandle { background:transparent url(/content/img/icon/color/arrow_next.gif) no-repeat center center; cursor:move; } /* for 例5 */ </style> </head> <body> <div id="wrap"> <h1><a href='http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/'>Table Drag and Drop JQuery plugin</a> | 設置サンプル</h1> <p>▼テーブルの行全体をドラッグ&ドロップして入れ替えられます。</p> <!-- CODE --> <h2>例1:デフォルト</h2> <div class="demo"> <table id="table-1" cellspacing="0" cellpadding="2"> <tr id="1"><td>1</td><td>One</td><td>some text</td></tr> <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr> <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr> <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr> <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr> <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr> </table> </div> <h2>例2:</h2> <div id="debugArea"> </div> <div class="demo"> <table id="table-2" cellspacing="0" cellpadding="2"> <tr id="2.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr> <tr id="2.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr> <tr id="2.3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr> <tr id="2.4"><td>4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr> <tr id="2.5"><td>5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr> <tr id="2.6"><td>6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr> <tr id="2.7"><td>7</td><td>Seven</td><td><input type="text" name="seven" value="7"/></td></tr> <tr id="2.8"><td>8</td><td>Eight</td><td><input type="text" name="eight" value="8"/></td></tr> <tr id="2.9"><td>9</td><td>Nine</td><td><input type="text" name="nine" value="9"/></td></tr> <tr id="2.10"><td>10</td><td>Ten</td><td><input type="text" name="ten" value="10"/></td></tr> <tr id="2.11"><td>11</td><td>Eleven</td><td><input type="text" name="eleven" value="11"/></td></tr> <tr id="2.12"><td>12</td><td>Twelve</td><td><input type="text" name="twelve" value="12"/></td></tr> <tr id="2.13"><td>13</td><td>Thirteen</td><td><input type="text" name="thirteen" value="13"/></td></tr> <tr id="2.14"><td>14</td><td>Fourteen</td><td><input type="text" name="fourteen" value="14"/></td></tr> </table> </div> <h2>例3:行の並び順を取得</h2> <div class="demo"> <div id="AjaxResult" style="float: right; width: 250px; border: 1px solid silver; padding: 4px; font-size: 90%"> <h3>Ajax result</h3> <p>ドラッグ&ドロップ後のtr要素の並び順を取得して表示します。</p> </div> <table id="table-3" cellspacing="0" cellpadding="2"> <tr id="3.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr> <tr id="3.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr> <tr id="3.3" class="nodrop"><td>3</td><td>Three (この行はドラッグできません)</td><td><input type="text" name="three" value="three"/></td></tr> <tr id="3.4"><td>4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr> <tr id="3.5" class="nodrag"><td>5</td><td>Five (この行の上にはドロップできません)</td><td><input type="text" name="five" value="five"/></td></tr> <tr id="3.6"><td>6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr> </table> </div> <h2>例4:複数のtbody要素</h2> <div class="demo"> <table id="table-4" cellspacing="0" cellpadding="2"> <tbody> <tr id="4.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr> <tr id="4.1"><td>4.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr> <tr id="4.2"><td>4.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr> <tr id="4.3"><td>4.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr> <tr id="4.4"><td>4.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr> <tr id="4.5"><td>4.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr> <tr id="4.6"><td>4.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr> </tbody> <tbody> <tr id="5.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr> <tr id="5.1"><td>5.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr> <tr id="5.2"><td>5.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr> <tr id="5.3"><td>5.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr> <tr id="5.4"><td>5.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr> <tr id="5.5"><td>5.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr> <tr id="5.6"><td>5.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr> </tbody> <tbody> <tr id="6.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr> <tr id="6.1"><td>6.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr> <tr id="6.2"><td>6.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr> <tr id="6.3"><td>6.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr> <tr id="6.4"><td>6.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr> <tr id="6.5"><td>6.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr> <tr id="6.6"><td>6.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr> </tbody> </table> </div> <h2>例5:矢印付き</h2> <div class="demo"> <table id="table-5" cellspacing="0" cellpadding="2"> <tr id="table5-row-1"><td class="dragHandle"> </td><td>1</td><td>One</td><td>some text</td></tr> <tr id="table5-row-2"><td class="dragHandle"> </td><td>2</td><td>Two</td><td>some text</td></tr> <tr id="table5-row-3"><td class="dragHandle"> </td><td>3</td><td>Three</td><td>some text</td></tr> <tr id="table5-row-4"><td class="dragHandle"> </td><td>4</td><td>Four</td><td>some text</td></tr> <tr id="table5-row-5"><td class="dragHandle"> </td><td>5</td><td>Five</td><td>some text</td></tr> <tr id="table5-row-6"><td class="dragHandle"> </td><td>6</td><td>Six</td><td>some text</td></tr> </table> </div> <!-- CODE / --> </div> </body> </html>
tablesorter
柔軟なクライアント・サイドテーブルソート
2008/11/30
tablesorter
[CSS]テーマ用CSS(green/blue)
[JS]jquery.js v1.2.6、jquery.tablesorter.min.js
(オプション)jquery.metadata.js、jquery.tablesorter.pager.js
[JS]jquery.js v1.2.6、jquery.tablesorter.min.js
(オプション)jquery.metadata.js、jquery.tablesorter.pager.js
見出しクリックでテーブルのデータをソートするjQueryプラグイン。 table要素に任意のid名を指定するだけで実装できます。 テーマを適用する場合は、table要素にtablesorterクラスを指定し、head要素内でテーマ用CSSを読み込めばOK。
オプションの「jquery.metadata.js」を使用すれば、複数の任意の列を指定してソートしたり、テーブルを読み込むときにあらかじめ指定した条件でソートして表示したり、外部ファイルを読み込んでテーブルにデータを追加することもすることも可能です。
ソートしたくない場合は、見出し(thead要素のth要素)に<th class="{sorter: false}">
を指定します。
オプションの「jquery.tablesorter.pager.js」を使用すれば、表示件数を指定可能なページ送りを簡単に組み込めます。
■ シンプルな例

<!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.tablesorter.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myTable").tablesorter(); }); </script> <!-- テーマ用CSS --> <link rel="stylesheet" href="themes/blue/style.css" type="text/css" charset="utf-8" />HTML
<table id="myTable" class="tablesorter"> <thead> <tr> <th>見出し</th> ・・・ </tr> </thead> <tbody> <tr><td>データ</td><td>データ</td><td>データ</td></tr> ・・・ </tbody> </table>
■ メタデータ:インラインオプションの設定
HEAD<!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.tablesorter.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.metadata.js" type="text/javascript" charset="utf-8"></script> <!-- テーマ用CSS --> <link rel="stylesheet" href="themes/blue/style.css" type="text/css" charset="utf-8" />
<table id="myTable" class="tablesorter"> <thead> <tr> <th>都道府県</th> <th>男女計</th> <th class="{sorter: false}">男</th> <th class="{sorter: false}">女</th> <th>人口性比</th> </tr> </thead> <tbody> <tr><td>データ</td><td>データ</td><td>データ</td></tr> ・・・ </tbody> </table>

<table id="myTable" class="tablesorter {sortlist: [[0,0],[4,0]]}">

■ ページプラグイン使用
HEAD<!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.tablesorter.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.tablesorter.pager.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { $("#myTable") .tablesorter({widthFixed: true, widgets: ['zebra']}) .tablesorterPager({container: $("#pager")}); }); </script> <!-- テーマ用CSS --> <link rel="stylesheet" href="themes/blue/style.css" type="text/css" charset="utf-8" />HTML
<!-- ページ送り --> <div id="pager" class="pager"> <form> <img src="/content/lib/tablesorter/addons/pager/icons/first.png" class="first"/> <img src="/content/lib/tablesorter/addons/pager/icons/prev.png" class="prev"/> <input type="text" class="pagedisplay"/> <img src="/content/lib/tablesorter/addons/pager/icons/next.png" class="next"/> <img src="/content/lib/tablesorter/addons/pager/icons/last.png" class="last"/> <select class="pagesize"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> </form> </div> <!-- ページ送り / --> <table id="myTable" class="tablesorter"> ・・・ </table>
