ラベル jQuery tablesorter の投稿を表示しています。 すべての投稿を表示
ラベル jQuery tablesorter の投稿を表示しています。 すべての投稿を表示

2008-05-04

jQuery を 1.1.* から 1.2.* にしたら tablesorter pager が動かなくなった

Postal Search Ajax API (構築キットを含む) をアップデートしました
Postal Search Ajax API に同封している jQuery のバージョンを 1.1.2 から 1.2.3 に差し替えました。この jQuery 1.2.3 は Minified 圧縮版 を使っています。
バージョンの差し替えで不都合はないと考えていましたが、現在の位置をページ単位でなく行単位で表示する方法 という jQuery tablesorter プラグインのデモでエラーが発生して動作しなくなっていました。なお、この不都合は改善してあります。

参考のため、不都合の原因やその対応を紹介しておきます。

tablesorter pager プラグインの次のコードでエラーが発生していました。このコードは、テーブルの高さ(レコード数など)が変わっても、ページャの位置が固定になるよう調整するためのものです。
function fixPosition(table) {
var c = table.config;
if(!c.pagerPositionSet && c.positionFixed) {
var c = table.config, o = $(table);
if(o.offset) {
c.container.css({
top: o.offset().top + o.height() + 'px',
position: 'absolute'
});
}
c.pagerPositionSet = true;
}
}
前述のデモでは、ページャの位置が固定されないことを期待していました。というのは、jQuery 1.1.* では、jQuery.fn.offset メソッドが存在しないため、このコードのスタイルを変更する部分が動作することはありませんでした。なお、jQuery.fn.offset メソッドを使おうとするときは、dimensions プラグインを必要としていました。

が、jQuery 1.2.* から jQuery.fn.offset メソッドが標準で組み込まれ ました。ですので、今まで動作しなかったコードが動作するようになり、c.container.css でエラーが発生するようになりました。

この不都合を改善する前は、次のように jQuery.fn.tablesorterPager メソッドを使っていました。ここで、container は jQuery オブジェクトを要求していますが、セレクタを指定していたため、css メソッドが存在しないというエラーになっていました。
$('#r1')
.tablesorter({
widgets: ['zebra']
})
.tablesorterPager({
container: '#p1',
size: 3
});
ので、次のように container には jQuery オブジェクトを指定するように修正しました。また、このままだと、ページャの位置が固定になってしまうので、positionFixed を無効にしました。
$('#r1')
.tablesorter({
widgets: ['zebra']
})
.tablesorterPager({
container: $('#p1'),
size: 3,
positionFixed: false
});
今回の不都合は、jQuery のバージョンアップによる標準メソッドの変化と、tablesorter pager プラグインの誤用という複合的なものでした。

前者は、しかたがないですかね。jQuery の新しいバージョンがリリースされるごとに、リリースノート をチェックするしかない気がします。

後者は、jQuery オブジェクトを要求せず、セレクタをも受け入れるインタフェースにすべきと考えます。というのが jQuery の特徴ですし、その他のプラグインもそうしているケースが多いですね。

2007-11-11

jQuery tablesorter 現在の位置をページ単位でなく行単位で表示する方法

jQuery plugin: Tablesorter 2.0 は tablesorter pagination plugin というプラグインと組み合わせて使うと、並べ替えができページングもできるテーブルを実現できます。

残念ながら tablesorter pagination plugin は、現在のページ数と総ページ数の表示をカスタマイズする方法がありません。非公式な方法がないかとソースコードを見てみましたが、その表示を横取りできるようになっていませんでした。そこでプラグインの外部でイベントを捕捉して、現在の行位置と総行数を表示することを試みてみました。

現在の位置をページ単位でなく行単位で表示する方法

カスタマイズの可能性をどこに線引くかは判断が難しいそうですね。表示する書式や内容は、なるべく利用者する側で決められるようにしたほうがよいのかもしれません。(今後の私への教訓とします。)

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のためにAjaxデザインパターン ―ユーザビリティと開発効率の向上のために
Michael Mahemoff 牧野 聡

デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン JavaScriptクイックリファレンス 第5版―JavaScript1.5対応 初めてのJavaScript―Ajax&DOM対応 JavaScript 第5版 WEB+DB PRESS 総集編 [Vol.1~36]

by G-Tools

jQuery tablesorter 並び替えできるテーブルであることをリンクで伝える方法

jQuery plugin: Tablesorter 2.0 は Blue Skin - Images and CSS styles for blue themed headers (as seen in the examples) というスタイルシートを提供しているので、すぐに見栄えのよい並べ替えできるテーブルを実現できます。

ただし、このスタイルシートのデザインだけだと、▼▲のアイコンの存在に気が付いて、そのアイコンをクリックしてみるまで、テーブルの行が並び替わることが伝わりません。これではせっかく導入したテーブルの並べ替えの効果が薄くなってしまいます。

そこで、ヘッダの項目名をリンクにして、テーブルの列に対して何か操作ができることを明示して、並び替えのできるテーブルであることを伝える方法をまとめました。

並び替えできるテーブルであることをリンクで伝える方法

小さな工夫がユーザビリティに大きな影響を与えるという実例でもあります。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のためにAjaxデザインパターン ―ユーザビリティと開発効率の向上のために
Michael Mahemoff 牧野 聡

デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン JavaScriptクイックリファレンス 第5版―JavaScript1.5対応 初めてのJavaScript―Ajax&DOM対応 JavaScript 第5版 WEB+DB PRESS 総集編 [Vol.1~36]

by G-Tools

2007-11-06

jQuery tablesorter HTML 要素を含む列でテーブルの行を並び替える

jQuery plugin: Tablesorter 2.0 は、テーブルの値に HTML 要素が含まれていても、自動的に、半自動的に、もしくは指定したルールにしたがって、テーブルをソートできる柔軟性を備えています。

都道府県を表すテーブルを題材に、span と a の複数の要素を含む列をソートする方法をまとめました。

HTML 要素を含む列でテーブルの行を並び替える

tablesorter 公式サイトの textExtraction を使ったデモ では、textExtraction プロパティに function を指定して、並べ替えのテキストを決定していますが、要素のテキストを使うだけなら もっと簡単に textExtraction プロパティに function 以外かつ simple 以外を指定するだけで、多くのケースをカバーできることがわかります。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のためにAjaxデザインパターン ―ユーザビリティと開発効率の向上のために
Michael Mahemoff 牧野 聡

デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン JavaScriptクイックリファレンス 第5版―JavaScript1.5対応 初めてのJavaScript―Ajax&DOM対応 JavaScript 第5版 WEB+DB PRESS 総集編 [Vol.1~36]

by G-Tools

2007-11-05

jQuery tablesorter 選択ボックスで指定した列でテーブルの行を並び替える

jQuery plugin: Tablesorter 2.0 は、テーブルのヘッダの列にある▼▲のアイコンをクリックする以外にも、リンクやフォームなど外側からのイベントを通じて、テーブルをソートすることもできます。

都道府県を表すテーブルを題材に、選択ボックスで指定した列でテーブルの行を昇順(または降順)ソートする方法をまとめてみました。

選択ボックスで指定した列でテーブルの行を並び替える

ソートの指示は jQuery.trigger メソッドから sorton イベントを指定する仕組みです。jQuery の標準イベントと同じように扱えるので、とても扱いやすい印象が残ります。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のためにAjaxデザインパターン ―ユーザビリティと開発効率の向上のために
Michael Mahemoff 牧野 聡

デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン JavaScriptクイックリファレンス 第5版―JavaScript1.5対応 初めてのJavaScript―Ajax&DOM対応 JavaScript 第5版 WEB+DB PRESS 総集編 [Vol.1~36]

by G-Tools

2007-11-04

jQuery tablesorter 指定した条件でテーブルの行を並び替える

jQuery plugin: Tablesorter 2.0 を使うと、指定した条件でテーブルの行を並び替えることができます。

都道府県を表すテーブルを題材に tablesorter のもっともオーソドックスな使い方をまとめてみました。

指定した条件でテーブルの行を並び替える - tablesorter - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions

1行間隔で行の背景色を変える方法、指定した列と並び順でソートする方法、指定した列のソートを無効にする方法を紹介しています。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のためにAjaxデザインパターン ―ユーザビリティと開発効率の向上のために
Michael Mahemoff 牧野 聡

デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン JavaScriptクイックリファレンス 第5版―JavaScript1.5対応 初めてのJavaScript―Ajax&DOM対応 JavaScript 第5版 WEB+DB PRESS 総集編 [Vol.1~36]

by G-Tools