ソート機能付きTABLEを簡単実装!!見た目も設定できて2度おいしい!jQueryプラグイン[tablecloth.js]

公開日:  最終更新日:2015/12/16

ソート機能付きTABLEを簡単実装!!見た目も設定できて2度おいしい!jQueryプラグイン[tablecloth.js]
<table>タグを使うことって結構ありますよね。
でも、デザインに迷ってしまったり、ソート機能を実装したいなーと感じることはありませんか?

本日は、さくっとソート機能付きの<TABLE>が実装できて、見た目も設定できるjQueryプラグインを紹介したいと思います。

スポンサードリンク

ソート機能付きTABLEを簡単実装「tablecloth.js」

111-1.png

tablecloth.js
にアクセスして「View Project on Github」をクリック
111-2.png
右側の「Download Zip」から必要なファイル一式をダウンロードしてください。

実装方法について

ダウンロードしたファイルの中から
「tablecloth.css」
「jquery.tablecloth.js」
「jquery.metadata.js」 ・・・・ソート機能を使うなら
「jquery.tablesorter.min.js」・・ソート機能使うなら
「imgフォルダ」

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

サンプルソース sample1.html

<link rel="stylesheet" href="tablecloth.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablecloth.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table").tablecloth({
theme: "stats", //テーマを指定
striped: true, //背景を交互
sortable: true //sort機能
});
});
</script>
----------------------------------
テーブルタグを記述
----------------------------------
・・・・<table></table>

1~5行目 ダウンロードしたCSSファイル、jsファイルを読み込みんでいます。
(サーバー内にアップするのを忘れないでください。サンプルソースは同一フォルダにファイルを配置した場合なのでパスも環境に合わせて変更してください)

6~14行目 スクリプトの実行、設定をしている部分になります。

指定できるオプションについて
■theme ・・・ default, none , stats , dark , paper
テーマを指定します。指定したテーマのデザインが反映されます。
■bordered ・・・ ボーダ true or false
ボーダーのありなしを指定します。
■striped ・・・ テーブルの各行の背景色を交互に変える。
行の背景色を交互に変えるかどうか  true or false
■sortable ・・・ ソート機能
ソート機能の有効、無効を指定 true or false
jquery.tablesorter.jsとjquery.metadata.jsが必要になります。

実装は以上です。あとは<table>を記述すれば指定したテーマ、設定で表示することが出来ます。とても簡単ですね。

動作サンプル

テーマ:stats

テーマ:dark

テーマ:paper


テーブルに簡単にソート機能を実装できるのはうれしいですね。デザインについてもテーマを指定するだけで良い感じになります。CSS内にテーマごとに記述があるので微調整をするだけであっという間に実装出来そうです。ぜひ、試してみてください。

<TABLE>の関連記事もよければご覧ください

テーブルのマウスオーバー時に行やセルの背景色を変更して表を見やすくする方法




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑