レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード

#v2にアップデートされたため刷新しました @2013/08/30

Footable (v2)

  • レスポンシブ対応テーブル
  • ソート
  • フィルタ
  • ページネーション

など

スクリプト

<link href= "css/footable.core.min.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="js/footable.js" type="text/javascript"></script>

スタイルのテーマが用意されています。standaloneもしくはmetroをインクルードして下さい。

<!-- テーマスタイル -->
<link href= "css/footable.standalone.min.css" type="text/css" rel="stylesheet">
<!--<link href= "css/footable.metro.min.css" type="text/css" rel="stylesheet">-->

実装

<table class="footable">
<thead><tr>
    <th data-class="expand">Name</th>
    <th data-hide="phone,tablet">Phone</th>
    <th data-hide="phone">Email</th>
</tr></thead>
<tbody>
    <tr><td>Bob Builder</td><td>555-12345</td><td>bob@home.com</td></tr>
    <tr><td>BridgetJones</td><td>544-776655</td><td>bjones@mysite.com</td></tr>
    <tr><td>TomCruise</td><td>555-99911</td><td>cruise1@crazy.com</td></tr>
</tbody>
</table>

ブレイクポイントの設定

表示形式とそれに対するカラムの表示有無を自由に設定できます。例では、 "phone"、"tablet"、その他の3つで境界(breakpoint)を設定します。thのdata-hideで表示しない形式(phoneやtablet)を指定します。breakpointで指定した幅よりも小さい場合に隠れるようになります。

<script type="text/javascript">
$(function() {
    $('.footable').footable({
        breakpoints: {
            phone: 640,
            tablet: 1024
        }
    });
});
</script>

デモ

FooTable サンプル
*ブラウザを小さくしてみて確認してください。

ソート機能アドオン

以下のスクリプトを追加で読み込みます。デモ

<script src="js/footable.sort.js" type="text/javascript"></script>

読み込むだけで自動的にソート機能を実装してくれます。

  • <table>にdata-sort="false":特定のテーブルでソート機能を無効化
  • <th>にdata-sort-initial="true":オープン時にそのカラムでソートして表示
  • <th>にdata-sort-ignore="true":そのカラムでのソートを無効化
  • <th>にdata-type="numeric":数値でソートを実施

フィルター検索機能アドオン

以下のスクリプト1つを追加で読み込みます。デモ

<script src="js/footable.filter.js" type="text/javascript"></script>

あとは、対象テーブルにdata-filter="inputフィールドのID"を指定して下さい。(下の例だと#filter)

<input id="filter" type="text"><!-- 入力テキストボックス-->
<table class="footable" data-filter="#filter">
...
</table>
  • <table>にdata-filter-minimum="3":フィルタ検索かける(最低)文字数 [デフォルト:2]
  • このエントリーをはてなブックマークに追加

関連記事

no image

色々なタイプの画像ギャラリーが実装できる「Rondell」

「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら

no image

「jqPlot」を使って棒グラフを作成

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

Comment

  1. 「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。

@hibigeek にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑