テーブルソート、テーブル操作｜jQuery plugin｜Ajax

TOP Ajaxテーブルソート、テーブル操作

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（並び順取得用）

テーブルの行全体をドラッグ＆ドロップで入れ替え可能にする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">&nbsp;</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">&nbsp;</td><td>1</td><td>One</td><td>some text</td></tr>
        <tr id="table5-row-2"><td class="dragHandle">&nbsp;</td><td>2</td><td>Two</td><td>some text</td></tr>
        <tr id="table5-row-3"><td class="dragHandle">&nbsp;</td><td>3</td><td>Three</td><td>some text</td></tr>
        <tr id="table5-row-4"><td class="dragHandle">&nbsp;</td><td>4</td><td>Four</td><td>some text</td></tr>
        <tr id="table5-row-5"><td class="dragHandle">&nbsp;</td><td>5</td><td>Five</td><td>some text</td></tr>
        <tr id="table5-row-6"><td class="dragHandle">&nbsp;</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

見出しクリックでテーブルのデータをソートするjQueryプラグイン。 table要素に任意のid名を指定するだけで実装できます。テーマを適用する場合は、table要素にtablesorterクラスを指定し、head要素内でテーマ用CSSを読み込めばOK。

オプションの「jquery.metadata.js」を使用すれば、複数の任意の列を指定してソートしたり、テーブルを読み込むときにあらかじめ指定した条件でソートして表示したり、外部ファイルを読み込んでテーブルにデータを追加することもすることも可能です。ソートしたくない場合は、見出し（thead要素のth要素）に<th class="{sorter: false}">を指定します。

オプションの「jquery.tablesorter.pager.js」を使用すれば、表示件数を指定可能なページ送りを簡単に組み込めます。

■ シンプルな例

» 例：テーブルソート（基本）

設置イメージ

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 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>

設置イメージ

jQuery plugin 要素のスライド

jQuery plugin タブ

PHP & JavaScript Room

jQuery pluginテーブルソート、テーブル操作

jQuery quickSearch plug-in
要素のデータを簡易検索

jQuery quickSearch plug-in

Table Drag and Drop JQuery plugin
テーブルの行全体をドラッグ&ドロップ

Table Drag and Drop JQuery plugin

tablesorter
柔軟なクライアント・サイドテーブルソート

tablesorter

■ シンプルな例

■ メタデータ：インラインオプションの設定

■ ページプラグイン使用

関連コンテンツ

jQuery pluginテーブルソート、テーブル操作

jQuery quickSearch plug-in要素のデータを簡易検索

jQuery quickSearch plug-in

Table Drag and Drop JQuery pluginテーブルの行全体をドラッグ&ドロップ

Table Drag and Drop JQuery plugin

tablesorter柔軟なクライアント・サイドテーブルソート

tablesorter

■ シンプルな例

■ メタデータ：インラインオプションの設定

■ ページプラグイン使用

関連コンテンツ

jQuery quickSearch plug-in
要素のデータを簡易検索

Table Drag and Drop JQuery plugin
テーブルの行全体をドラッグ&ドロップ

tablesorter
柔軟なクライアント・サイドテーブルソート