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

ホーム > Postal Search Ajax API with jQuery > tablesorter

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

次の例は tablesorter pagination plugin を使って、1ページあたり3行でページングするテーブルです。各リンクをクリックすると、先頭のページ、前のページ、次のページ、最後のページに移動できます。また、選択ボックスで表示行数を指定すると、1ページあたりの行数を変更できます。編集ボックスには n / N という書式で、現在のページと総ページ数を表示します。

jQuery(function($) {

$('#r1')
  .tablesorter({
      widgets: ['zebra']
    })
  .tablesorterPager({
      container: $('#p1'),
      size: 3,
      positionFixed: false
    });

}); //jQuery

#	都道府県	フリガナ	ふりがな	ローマ字
08	茨城県	イバラキケン	いばらきけん	ibaraki
09	栃木県	トチギケン	とちぎけん	tochigi
10	群馬県	グンマケン	ぐんまけん	gunma
11	埼玉県	サイタマケン	さいたまけん	saitama
12	千葉県	チバケン	ちばけん	chiba
13	東京都	トウキョウト	いばらきけん	ibaraki
14	神奈川県	カナガワケン	かながわけん	kanagawa

<< < > >>

現在のページ数と総ページ数の表示では、総行数が伝わりません。またページ数よりも、検索エンジンの検索結果のように、総行数のうち何行目から何行目と表示したほうが伝わりやすいと想定できます。

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

次の例では、先頭のページ、前のページ、次のページ、最後のページのリンクの click イベントと、選択ボックスの change イベントを捕捉して、現在の行位置と総行数を表示しています。また、ページをロードしたときにもその表示を反映するため、現在の行位置と総行数を表示しています。

何行目から何行目という現在の行位置は、総行数と現在のページから算出しています。総行数、現在のページ、1ページあたりの行数は、table 要素の config プロパティから取得できます。また、新しく .pageHint というクラスを用意して、そのクラスの要素に現在の行位置と総行数を表示しています。.pageHint というクラス名は config.cssPageHint プロパティで変更できます。

jQuery(function($) {

function pageHint(sorter) {
  $(sorter).each(function() {
    var c = this.config;
    var total = c.totalRows;
    var from = c.page * c.size + 1;
    var to = (c.page + 1) * c.size;
    if (to > total)
      to = total;
    $(c.cssPageHint, c.container)
      .text([total, '件中', from, '-', to, '件目'].join(' '));
  });  
}

var pager = $('#p2');
var sorter = $('#r2')
  .tablesorter({
      widgets: ['zebra']
    })
  .tablesorterPager({
      container: pager,
      size: 3,
      cssPageHint: '.pagehint',
      positionFixed: false
    }); 

$('.next, .prev, .first, .last', pager)
  .click(function() {
      pageHint(sorter);
    });

$('.pagesize', pager)
  .change(function() {
      pageHint(sorter);
    });

pageHint(sorter);

}); //jQuery

#	都道府県	フリガナ	ふりがな	ローマ字
08	茨城県	イバラキケン	いばらきけん	ibaraki
09	栃木県	トチギケン	とちぎけん	tochigi
10	群馬県	グンマケン	ぐんまけん	gunma
11	埼玉県	サイタマケン	さいたまけん	saitama
12	千葉県	チバケン	ちばけん	chiba
13	東京都	トウキョウト	いばらきけん	ibaraki
14	神奈川県	カナガワケン	かながわけん	kanagawa

<< < > >>

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

関連情報