tableをレスポンシブ対応させるjQueryプラグイン「FooTable」 | サービス | プロエンジニア

    tableをレスポンシブ対応させるjQueryプラグイン「FooTable」

    • このページをはてなブックマークに追加

    レスポンシブテーブルを作成するjQueryプラグインの「FooTable」について解説します。HTMLタグのテーブル(table)要素をレスポンシブ対応させるには、「jQuery」プラグインなどを使わず「CSS」のみで対応する方法や、「CSS」と「jQuery」プラグインの両方を使った方法などがあります。
    「CSS」のみでレスポンシブテーブル対応する方法については、「レスポンシブ対応のtableを作成しよう!」の記事で解説していますのでご参考下さい。
    また、HTMLテーブルの作成方法や、CSSでテーブルスタイルを指定する方法など基本テーブルの作成方法や「FooTable」プラグイン以外のプラグインについては、以下の関連記事もご参考下さい。

    関連記事:「HTML入門【<table>タグ】~テーブル(表)を作成してみよう~
    関連記事:「CSSでテーブル(表)をデザインする方法【基礎編】
    関連記事:CSSでテーブル(表)をデザインする方法【応用編】
    関連記事:CSSでシンプルなテーブルをデザインする
    関連記事:tableをレスポンシブ対応させるjQueryプラグイン「Basic Table」
    関連記事:tableをレスポンシブ対応させるjQueryプラグイン「Responsive Tables」

    最終更新日:2018年1月27日

    目次

    1. 「FooTable」プラグインをダウンロードする

    1.1. 作者のページからjQueryプラグインをダウンロードする

    まずは、「FooTable」プラグインを作者のサイトからダウンロードしてみましょう。

    「FooTable」作者のサイト:http://fooplugins.github.io/FooTable/docs/getting-started.html

    ●FooTable

    「FooTable」のダウンロードサイトには3種類のファイルをダウンロードする事ができますが、今回は「Individual Components」をダウンロードします。
    一番右側の「Download」ボタンをクリックして「FooTable」プラグインの圧縮ファイルをPC上の任意の場所にダウンロードして下さい。ファイル名は「footable-components.latest.zip」になります。

    ●footable-components.latest.zip

    ▲ページトップへ戻る

    1.2. 「FooTable」プラグインの使える環境を整える

    1.2.1. 圧縮ファイル(footable-components.latest.zip)を解凍する

    ダウンロードが終了したら、「FooTable」プラグインを使う環境を作成します。本コラムでは、ローカルPC上にWeb用のファイルを保存するフォルダーと文書を作成していきます。早速先ほどダウンロードした圧縮ファイル(footable-components.latest.zip)を解凍しましょう。

    「footable-components.latest.zip」ファイルを右クリックして、メニューから「すべて展開」を選択して下さい。
    任意のフォルダーを解凍先に指定すると「footable-components.latest」フォルダー内にレスポンシブ対応用の「cssの」フォルダーと「js」フォルダーが展開されます。

    ●「footable-components.latest」フォルダー

    ▲ページトップへ戻る

    1.2.2. Webサイト用のフォルダーにプラグイン関連ファイルをコピーする

    ローカルPC上に、Web用のファイルを保存する「www」フォルダーを作成します。このフォルダーの中に先程展開した「FooTable」プラグインのファイルをコピーします。

    ●Webサイト用のwwwフォルダー

    「www」フォルダー直下に、「FooTable」プラグインと同じ「css」フォルダーと「js」フォルダーを新規で作成して下さい。

    まずは、「footable-components.latest\css」フォルダーにある、「footable.core.standalone.css」ファイルを「www\css」フォルダーへコピーします。

    ●「footable-components.latest\css」フォルダー

    次に、「footable-components.latest\js」フォルダー内にある「footable.core.js」ファイルを「www\js」フォルダーにコピーします。

    ●「footable-components.latest\js」フォルダー

    「www」フォルダー内の構成は以下の通りです。

    ・「www\js\footable.core.js」
    ・「www\css\footable.core.standalone.css」

    次の章で、レスポンシブテーブルの元となるHTMLファイルを作成します。

    ▲ページトップへ戻る

    2. レスポンシブ対応用の基本テーブルを作成する

    「www」フォルダーに、基本のHTMLファイルを作成します。tableタグを使ってCSSやレスポンシブ対応前のテーブルを作成します。
    以下のコードをコピーして、ファイル名を「responsive-table.html」で保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●responsive-table.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>レスポンシブテーブル</title>
    </head>
    <body>
    <h1>レスポンシブテーブルデザイン</h1>
    
    <table>
    	<thead>
    		<tr>
    			<th>ID</th>
    			<th>姓</th>
    			<th>名</th>
    			<th>住所1</th>
    			<th>住所2</th>
    			<th>電話番号</th>
    		</tr>
    	</thead>
    	<tbody>
    	<tr>
    		<td>001</td>
    		<td>山田</td>
    		<td>太郎</td>
    		<td >東京都</td>
    		<td >中央区</td>
    		<td >00-123-4567</td>
    	</tr>
    	<tr>
    		<td>002</td>
    		<td>佐藤</td>
    		<td>花子</td>
    		<td >東京都</td>
    		<td >港区</td>
    		<td >00-222-8888</td>
    	</tr>
    	<tr>
    		<td>003</td>
    		<td>佐藤</td>
    		<td>次郎</td>
    		<td >神奈川県</td>
    		<td >横浜市</td>
    		<td >00-555-6789</td>
    	</tr>
    	</tbody>
    </table>
    
    </body>
    </html>
    

    1行目が見出し行、6列のテーブルを作成しました。CSSの設定はまだしていない為、テーブルのボーダーは表示されません。
    「FooTable」プラグインは、「jQuery」ファイルと「CSS」ファイルを配置し、HTMLで読み込む事でレスポンシブ対応用のテーブルを実現します。

    ●「responsive-table.html」

    ▲ページトップへ戻る

    3. 「FooTable」プラグインを使ってレスポンシブ対応のテーブルを作成する

    3.1. 見出しとデーターの表示・非表示を設定する方法

    作成した「responsive-table1.html」ファイルに、レスポンシブ対応のコードを記述していきましょう。 「FooTable」プラグインを使うと、スマホやタブレットなど小さい画面やブラウザーの横幅を小さくすると、でテーブルデータが非表示になり、展開アイコンをクリックしてデーターを確認する事が出来るようになります。

    先程コピーした「CSS」ファイルと「JavaScript」ファイルをHTMLで読み込むコードを記述します。

    ●responsive-table.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>レスポンシブテーブル</title>
    
    <link rel="stylesheet" href="css/footable.core.standalone.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/footable.core.js"></script>
    
    <script>
    	jQuery(function($){
    		$('.table').footable();
    	});
    </script>
    
    </head>
    <body>
    <h1>レスポンシブテーブルデザイン</h1>
    
    <table class="table">
    	<thead>
    		<tr>
    			<th data-breakpoints="xs">ID</th>
    			<th>姓</th>
    			<th>名</th>
    			<th data-breakpoints="xs" data-title="住所1">住所1</th>
    			<th data-breakpoints="xs sm" data-title="住所2">住所2</th>
    			<th data-breakpoints="xs sm md" data-title="電話番号">電話番号</th>
    		</tr>
    	</thead>
    	<tbody>
    	<tr>
    		<td>001</td>
    		<td>山田</td>
    		<td>太郎</td>
    		<td >東京都</td>
    		<td >中央区</td>
    		<td >00-123-4567</td>
    	</tr>
    ・・・省略・・・
    </tbody>
    </table>
    
    </body>
    </html>
    

    7行目でテーブルスタイル用の「CSS」ファイル「footable.core.standalone.css」を読み込みます。

    <link rel="stylesheet" href="css/footable.core.standalone.css">
    

    8行目では、Webアイコンフォントの「font-awesome.min.css」を指定して展開用のアイコンを表示します。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    

    10行目~11行目で、jQueryプラグインの「jquery.min.js」ファイルと「footable.core.js」を指定して下さい。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/footable.core.js"></script>
    

    また、23行目の<table>タグの「class属性」では、「"table"」を指定してましょう。

    <table class="table">
    

    FooTable」プラグイン用の属性を、見出しの「thタグ」に指定します。一つ目の見出しの「ID」の「thタグ」に「data-breakpoints="xs"」を指定します。

    「FooTable」プラグインでは、「data-breakpoints属性」で、テーブル見出し列のブレイクポイントを設定できます。「xs」は、「extra small」で「480px」より小さくなると見出しが非表示になります。
    その他に、smallの"sm"は「768px」、mediumの"md"は「992px」、largeの"lg"は「1200px」よりも小さくすると、列を非表示にする事ができます。

    本コラムのサンプルコードでは、「姓」と「名」のタグを常に表示し、その他のタグをブラウザーの幅などに合わせて非表示設定にしています。
    「住所1」には「xs」、「住所2」には「xs」と「sm」、「電話番号」には「xs」と「sm」、それから「md」を設定しました。

    <th data-breakpoints="xs">ID</th>
    <th>姓</th>
    <th>名</th>
    <th data-breakpoints="xs" data-title="住所1">住所1</th>
    <th data-breakpoints="xs sm" data-title="住所2">住所2</th>
    <th data-breakpoints="xs sm md" data-title="電話番号">電話番号</th>
    

    「FooTable」プラグインのCSS・jsファイルと「jQuery」の設定でテーブルの罫線などのスタイルが追加され、レスポンシブ対応のテーブルを作成する事ができました。
    ブラウザーの横幅を小さくして、ファイルの動作を確認してみて下さい。

    ●レスポンシブ対応後の「responsive-table.html」のテーブル表示

    ブラウザーの幅を「480px」よりも小さくしてみると、ブレイクポイント属性を指定していない「姓」と「名」のみが表示され、それ以外の項目は非表示になります。「姓名」の左側に展開アイコンの「+」が表示されますので、アイコンもしくは名前をクリックしてみて下さい。非表示になっていたデータが展開された形で表示されます。

    ●レスポンシブ対応後の「responsive-table.html」のテーブル表示

    ブラウザーの横幅を「480px」以上で、「768px」よりも小さくしてみると、今度は、"sm"を指定している、「住所2」と「電話番号」のみが非表示になり、その他の「ID」、「姓」、「名」、「住所1」が表示されるようになります。

    ▲ページトップへ戻る

    3.2. レスポンシブ対応テーブルの見出しをソートさせる方法

    先程作成した、レスポンシブ対応用のテーブルに、ソート機能を追加してみましょう。

    「footable-components.latest」フォルダー直下の「js」フォルダーにテーブルソート用の「footable.sorting.js」ファイルがありますので、Web用フォルダーの「www\js」フォルダーにコピーして下さい。

    ●「www\js」フォルダー

    「FooTable」プラグインでのソートは非常に簡単に設定できます。この「footable.sorting.js」を先ほどのHTMLに追加(6行目)して、テーブルタグ(table)に「data-sorting="true"」を指定し(12行目)ソート機能を有効にするだけです。

    ●「responsive-table.html」

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    ・・・省略・・・
    <script src="js/footable.core.js"></script>
    <script src="js/footable.sorting.js"></script>
    ・・・省略・・・
    </head>
    <body>
    <h1>レスポンシブテーブルデザイン</h1>
    
    <table class="table" data-sorting="true">
    	<thead>
    		<tr>
    			<th >ID</th>
    			・・・省略・・・
    	</thead>
    ・・・省略・・
    

    またソートが分かりやすいように1列目の見出し「ID」を常に表示する為に「thタグ」の属性「data-breakpoints="xs"」を削除します(15行目)。

    ●ソート追加後の「responsive-table.html」

    見出しの横にソートアイコンの三角マークが表示されます。アイコンをクリックすると、「昇順」、「降順」にソート可能になりました。

    ▲ページトップへ戻る

    関連記事:「HTML入門【<table>タグ】~テーブル(表)を作成してみよう~
    関連記事:「CSSでテーブル(表)をデザインする方法【基礎編】
    関連記事:CSSでテーブル(表)をデザインする方法【応用編】
    関連記事:CSSでシンプルなテーブルをデザインする
    関連記事:レスポンシブ対応のtableを作成しよう!
    関連記事:tableをレスポンシブ対応させるjQueryプラグイン「Basic Table」
    関連記事:tableをレスポンシブ対応させるjQueryプラグイン「resTables」
    関連記事:tableをレスポンシブ対応させるjQueryプラグイン「Responsive Tables」

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Java/Spring】システムエンジニア★証券会社向けフロントシステム開発

    証券会社向けフロントシステム開発を お任せします。

    フリーランス

    【Java】システムエンジニア★デリバティブバックオフィス運用改善

    現在、Excelマクロをベースに運用している 証券会社のデリバティブバックオフィス作業を 工数削減と作...

    フリーランス

    【VB6/VB.net】システムエンジニア★VB6→VB.netへのマイグレーション

    医療機関向けの部門システムを、 VB6からVB.netへ マイグレーションしていただきます。

    フリーランス

    【Java/DB】システムエンジニア★人事情報統合・移行システム開発

    銀行の人事情報と利用者情報の統合・移行システム開発を お任せします。 8月~10月までは基本設計フ...

    フリーランス

    【HTML/CSS/Javascript】フロントエンドエンジニア★自社サービス

    ・フロント周りの設計/開発/テスト/運用 ・HTML5、CSS3、JavaScript を利用した開発 (モックアッ...