WEB開発の調べものに疲れたら… 「独学レベルだと、この案件こなせない・・・」
そんな方におすすめなのが、オンラインで現役エンジニアの個人レッスンを受けられる「Code Camp 」。
大手企業も導入する実践的カリキュラム の直接指導を受けながら、未経験からでも即戦力のエンジニアになるための、最適なWEBデザイン・プログラミングスクールです。
今なら無料カウンセリングで、あなたに合ったコースをオーダーメイドが出来るチャンスです。
\無料体験学習実施中/
tablesorter(テーブルソーター)とは Table Sorterは、Wordpress内のTHEADとTBODYタグを持つ標準的なHTMLテーブルを、ページを更新することなくソート(並び替え)可能なテーブルに変えます。
(クロスブラウザ対応:IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+。)
tablesorterは、以下の便利な機能を備えています。
THカラムのソート ソート無効のTHカラムを設定 複数列の同時並べ替え 動作例 高さ 設計者 建設 東京タワー 333m 内藤多仲 等 1958年 通天閣 103m 内藤多仲 1956年 京都タワー 131m 山田守 1959年
Table Sorterの使い方 tablesorterは自分で作成したTableでもWordpress標準機能で作成したTableでも、タグ内に特定のクラスを追加するだけで動作します。
動作に必ず必要な設定 WordPressプラグイン「Tablesorter」をインストール テーブル内にTHEADとTBODY、THタグ TABLEタグに「class="tablesorter"」を追加 <table class="tablesorter" ><thead>
<tr><th class="sortless" ></th>
<th>高さ</th>
<th>設計者</th>
<th>建設</th>
</tr></thead>
<tbody>
<tr>
<td>東京タワー</td>
<td>333m</td>
<td> 内藤多仲 等</td>
<td>1958年</td>
</tr>
<tr>
<td>通天閣</td>
<td>103m</td>
<td>内藤多仲</td>
<td>1956年</td>
</tr>
<tr>
<td>京都タワー</td>
<td>131m</td>
<td>山田守</td>
<td>1959年</td>
</tr>
</tbody>
</table>
ソート機能を無効にするカラムの設定 特定のカラムのソートを無効にするにはTHEADタグ内の必要なTHカラムに 「class="sortless"」を追加します。
複数列の同時並べ替え シフトキーを押しながら、2列目、3列目、4列目のヘッダーをクリックすることで可能
初期ソートの設定 *ドキュメントを和訳しただけなので動作未確認です。
HTMLのテーブルのCLASS属性に、以下のような形式で指示を追加することで、初期ソートをかけることができます。{sortlist: [[columnIndex, sortDirection], … ]}ここで、columnIndexは列の左から右へのゼロ・ベースのインデックスで、sortDirectionは昇順の場合は0、降順の場合は1です。昇順で最初に列1、次に列2でソートする有効な引数は次のようになります。{sortlist: [[0,0],[1,0]]}
日付で並べ替える 日付カラムをソート可能にするには、日付カラムの先頭にdateFormat-dd/mm/yyyyクラスを追加してください。日付の書式は、必要に応じて変更できます。
ソートの矢印の色を変えるには?
WordPressプラグインのtablesorterは矢印に画像を使用しており、CSSではたぶん変更できなさそうです。
ですので、画像をダウンロードしてフォトショップなどで色を変えてしまうのが確実です。
画像の場所 使用されている矢印の画像は以下の3つ
https://(あなたのドメイン)/wp-content/plugins/table-sorter/images/bg.gif
https://(あなたのドメイン)/wp-content/plugins/table-sorter/images/desc.gif
https://(あなたのドメイン)/wp-content/plugins/table-sorter/images/asc.gif
白い矢印でよければこれ使ってください tablesorter-arrows.zip
白い矢印画像ともともと使用されている黒矢印の画像です。(bg.gif,desc.gif,asc.gif)
FTPでimagesフォルダに直接アップして上書きして、キャッシュをクリアすれば白矢印になります。
さいごに
TablePressで出来てTableSorterには出来ない機能として、ページャー機能があります。
それは今後の課題ですが、一番シンプルに使う方法方は以上です。
どこかの誰かのお役に立てていたら幸いです。
それでは。
ディスカッション
コメント一覧
まだ、コメントがありません