• 当サイトについて
  • リンク
  • サイトマップ

ShanaBrian Website

  • トップ
  • 壁紙
  • Web素材
  • Webサイト制作支援
  • お問い合わせ
  • TOP
  •  
  • Webサイト制作支援
  •  
  • TinyTableの使い方

TinyTableの使い方 TinyTable

  • ツイート
  • このエントリーをはてなブックマークに追加
  • チェック

TinyTableの使用方法をご紹介しています。
TinyTableは、テーブル(表)にソート、ページの機能を追加するJavaScriptライブラリです。
ページ機能は、1ページに表示する行数、ページの移動、ページ番号の表示などの機能です。

公式サイト

サンプル

ダウンロードと設置

こちらからダウンロードして解凍します。
解凍後、csorterディレクトリを任意の場所に設置します。

JavaScriptの読み込みと設定

以下のタグを<head>内に記載します。
パスは環境により変更してください。

以下のタグを</body>の直前に記載します。
(適用させるテーブルの下であれば<body>内のどこでもかまいません。)

適用方法(ソート機能)

table属性にidを割り当てます。
見出し部分をthead要素、内容をtbody要素で囲います。
なお、tbody要素内にth要素を含めるとオプションで設定可能なclass名が無効になりますのでご注意ください。

ソート機能を実装しない項目は class="nosort"を設定します。

ページ機能の設定(最大行数)

1ページの最大行数の設定は以下のオプションを設定します。
※ 「読み込み」でsorter.init();を設定した部分に追加します。

最大行数を変更するプルダウンメニューを設置する場合は以下のようにします。
※ optionは任意でかまいません。

ページ機能の設定(ページ移動)

ページを移動するボタンを設置する場合は以下のようにします。

HTML

JavaScript

ページ機能の設定(ページ番号の表示)

ページ番号を表示する場合は以下のオプションを設定します。

表示したい場所にIDを付加したタグを設置します。

オプション

class名の設定についてはほぼすべての設定を行わないと、undefinedと出力されてしまいますのでご注意ください。

オプション名 説明
sorter.head 見出し(th要素)行のclass名を設定します。
sorter.asc 昇順のclass名を設定します。
sorter.desc 降順のclass名を設定します。
sorter.even 奇数行のclass名を設定します。tr要素に付加されます。
sorter.odd 偶数行のclass名を設定します。tr要素に付加されます。
sorter.evensel ソートされている列の奇数行先端セルのclass名を設定します。
sorter.oddsel ソートされている列の偶数行先端セルのclass名を設定します。
sorter.currentid 現在のページ数のclass名を設定します。
sorter.limitid 最大ページ数のclass名を設定します。
sorter.paginate ページの機能の有無です。初期値はfalseです。
sorter.pagesize 1ページの最大行数です。sorter.paginateがtrueの場合に設定します。
  • ツール

    • パスワード自動生成
    • パスワードの暗号化
    • エンティティ変換
    • URLエンコード/デコード
    • Unicode変換
    • QRコード生成
    • 文字カウンター
    • 画像サイズ計算
    • 文字変換
    • ディスプレイのPPIを算出
    • CSSセレクタ―利用可否チェック
    • 画像ファイルをBase64文字列へ変換
    • CSSカスタムイージング
    • CSS Selector Nth Tester
    • カラーコード相互変換
    • CSS Sprite Generator
    • マルチアイコン生成
  • JavaScript、jQuery
    ライブラリ、APIの紹介

    • autoKana
    • Lightbox2
    • Lightbox2.5~2.7
    • SyntaxHighlighter2
    • SyntaxHighlighter1.5.1
    • Tablekit
    • TinyTable
    • XMLの読み込み
    • AjaxZip3
    • AjaxZip2
    • fleXcroll
    • jScrollPane
    • Slimbox 2
    • jQuery LightBox Plugin
    • jQuery Cycle Plugin
    • Roundabout
    • DD_belatedPNG
    • jQuery&prototypeの共存
  • リファレンス

    • jQuery逆引き
    • JavaScript逆引き
    • CSS3逆引き
    • SASS・SCSS逆引き
  • カラーコード

    • Webセーフカラー
    • ネームカラー
    • モノトーンカラー
    • グレースケールカラー
    • パステルカラー
    • カラーリスト1
    • カラーリスト2
    • カラーコード変換
  • その他

    • 特殊文字・特殊記号
    • CSSプロパティ・値の読み方
    • HTML・CSS・JavaScriptのテクニック集
    • CSSセレクター一覧
    • CSSハック
    • バナーサイズ一覧
    • PHP簡単カレンダー関数
    • 正規表現
    • 文字コード
    • 機種依存文字
  • トップ
  • 壁紙
  • Web素材
  • Webサイト制作支援
  • お問い合わせ

copyright © 2008-2018 ShanaBrian. All rights reserved.