fc2ブログ

JQuery TableSorter

ホームページで行数が多いテーブルがあり、すっきりしたデザインにしたかった。
そこで、私の要望は
 ・ タイトル行が固定、明細をスクロール
 ・ ヘッダクリックでソート
 ・ 1行置きに色を付ける
 ・ 選択行が色などでわかる
 ・ JQueryプラグイン
となかなか細かい。

まず Flexgrid をダウンロードして試してみて、リッチなインターフェースがこんなにも簡単に作れてしまうのか驚かされました。データ形式はJSON、XML、固定Tableの3つ。JSONはDominoのOpenAgentをURLに指定して試すが、ソート機能が効かない。固定Tableも同様、どうやらローカルでソートするロジックではないようだ。運用者を考慮すると、固定テーブルもしくはXMLファイルが望ましかったがXMLはサンプルもなく、試してみるができませんでした。

その後も色々なプラグインを試し、最終的に TableSorter を選びました。
そのままでは「タイトル行が固定、明細をスクロール」の要件を満たしていませんが、スマートな作りなのでCSS を工夫して何とか形になりました。
作った サンプルはこちら で、サンプルの説明は下記の図の通り。

css

ちなみに 前回 のDominoのDOCTYPEがデフォルトのままだとIE6.0でtheadが上に上がりません。
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

まさしく

ほしいテーブルの条件でした。
自分はそれに
・カラムの表示非表示
・カラム幅のドラッグ調整
・colspan rowspanが設定されている状態でのソート
を加えたくて試行錯誤してます。
あとは、『タイトル行が固定、明細をスクロール』だけなんですが、カラム幅が変動するとタイトルと明細の幅がうまく連動してくれない・・orz
ここまできたら、もう自作した方が早いんですかね・・。

cssで調整というのは今まで考えてなかったので、これを参考にもうちょっと粘ってみます。

Re: まさしく

汎用的でなければjQueryで自前の方が良いとは思いますが、それには私の頭がついていけるかが問題です。
列幅は考えてみたのですが、アイデア浮かばなくすみません。時間ができたらチャレンジしてみます。
jQueryプラグインでは"ingrid"も良かったのですが、ただajaxよりバックグランドでデータを持ってくることが前提のようです。
jQueryプラグインを利用させてもらっておきながら図々しいのですが、帯に短し襷に長すぎが多いですね、使いすぎればサイズも馬鹿にならないし。プラグインではなくシンプルなjQuery例が出てくれば嬉しいのですが...私も作ったらブログに書くようにしていこうと思います。

困っています。

困っており、教えて頂きたいです。

上記テーブルは、ネットで色々検索した中で、
一番理想のテーブルでした。

サンプルを拝見させて頂き、真似をして作ってみたのですが、
上手くいきません…(;_;)

CSSで指定している「padding」や「position」の指定が、
自分が作ったCSSで間違っているのだと思うのですが、

サンプルとしてCSSも公開していただけないでしょうか?

宜しくお願い致します。

Re: 困っています。

こちらがCSSになります。

th, td {
 font:12px/1.22 "Osaka", "MS Pゴシック", Arial, sans-serif;
 *font-size:small;
 *font:x-small;
}
#tableheader {
 position:relative;
 border:1px solid #999;
 width:230px;
 padding-top:17px;
}
#tablecontent {
 overflow:auto;
 height:120px;
}
#tablesorter {
 border-spacing:0;
}
#tablesorter thead tr .header {
 background-image:url(tablesorter_bg.gif);
 background-repeat:no-repeat;
 background-position:center right;
 cursor:pointer;
}
#tablesorter thead tr {
 position:absolute;
 top:0;
 left:0;
}
#tablesorter thead tr th {
 background-color:#b2d6ff;
 border-right:1px solid #999;
 border-bottom:1px solid #999;
 width:100px;
 font-weight:normal;
}
#tablesorter tbody tr td {
 border-right:1px solid #999;
 border-bottom:1px solid #ddd;
 width:100px;
}
#tablesorter thead tr .headerSortUp {
 background-image:url(tablesorter_asc.gif);
}
#tablesorter thead tr .headerSortDown {
 background-image:url(tablesorter_desc.gif);
}
#tablesorter thead tr .headerSortDown, #tablesorter thead tr .headerSortUp {
 background-color: #5998e0;
}
#tablesorter tbody tr.even td {
 background-color:#fff;
}
#tablesorter tbody tr.odd td {
 background-color:#eee;
}
#tablesorter tbody tr.over td {
 background-color:#ffe6b3;
}

ありがとうございます!!!

できました!!!
理想の一覧になりました!

とってもとっても助かりました。
本当にありがとうございましたm(_ _)m

感謝感激!!

わたしも、ここのところずっと、ソート+ヘッダ固定+行ハイライト の組み合わせで、サンプルを探し続け早3週間。さまざまなプラグインを試してたのですが、いずれもすべての要望を満たすものはどれもなく・・・。まさにあきらめかけていたときに、このサイトを見つけました。早速、公開されていたサンプルを元に実装したら、、見事要望を満たすことができました!

ピヨパパ さま、非常に感謝しております!
プロフィール

ピヨパパ

Author:ピヨパパ
静岡市のエンドユーザーSE。
最近はDominoの開発ばかりでうんざり。
是非気軽にコメントして下さい。

FC2カウンター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる