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 の特徴ですし、その他のプラグインもそうしているケースが多いですね。