Flexigrid：ページ表示

最終更新日時：2010-09-27 14:57:00
Flexigrid

概要

Flexigrid で Ajax を使うことにより、ページ単位での表示を簡単に実装することが出来ます。
この機能はとても汎用性があると思いますので、非常に便利です。

実装方法

JavaScript 側と Ajax の呼び出されるプログラム側とで実装する必要があります。
ここでは、Flexigrid で Ajax を使用する方法については省きますので、その辺りは FlexigridでAjaxを使うを参照。

JavaScript 側

以下のページ関連の設定項目を指定するだけでＯＫです。
とても簡単。

項目	概要
usepager	ページ単位での表示を行う
pagestat	現在ページの表示。デフォルトは "Displaying {from} to {to} of {total} items"
pagetext	"Page" の表示
outof	"/" の表示
rp	１ページに表示するデータ数
rpOptions	１ページに表示するデータ数のプルダウンメニューの選択肢
sortname	ソートする対象
sortorder	ソートの昇順／降順

また、colModel 中の sortable でソートできる項目を指定します。
colModel の詳細は FlexigridでAjaxを使うを参照。

以下、実装例です。

 pagestat: '全 {total} 件のうち、{from} - {to} 件目を表示中',
 pagetext: 'ページ',
 outof:    '/',
 rp:    25,
 rpOptions: [25,40],
 colModel : [ {display: 'ID', name: 'id', width: 40, sortable : true, align: 'right' },
              {display: 'タイトル', name: 'title', width: 300, sortable : true, align: 'left' },
              {display: '最終更新日時', name: 'updated_on', width: 200, sortble: true, align: 'left' },
            ],
 sortname: "updated_on",
 sortorder: "desc",

Ajaxで呼び出されるプログラム側

こちらも同様に基本は、FlexigridでAjaxを使うのように実装します。
プラスアルファとして、以下のページ関連情報が取得できますので、これを利用して該当するデータを渡すように実装します。

項目	概要
page	表示するページ数
rp	１ページあたりの表示数
sortname	ソートする対象
sortorder	ソートの昇順／降順

以下、Perl プログラムの例です。

 use Encode;
 use JSON;
 
 ...
 
 my $page = $self->param('page');
 my $rp = $self->param('rp');
 my $sortname = $self->param('sortname') || '';
 return unless $sortname;
 
 my @all_rows = TEST::DB->retrieve_all_sorted_by(join(' ', $sortname, $self->param('sortorder')));
 my $total = @all_rows;
 my @rows = ();
 for my $w (@all_rows[($page - 1) * $rp .. $page * $rp - 1]) {
     push @rows, { id    => $w->id,
                   cell  => [ $w->id,
                              Encode::decode_utf8($w->title),
                              $w->updated_on->strftime('%Y-%m-%d %H:%M:%S'),
                            ],
                 } if $w;
    }
    my $result = { page => $self->param('page'),
                   total => $total,
                   rows  => [ @rows ],
                 };
    print $self->header(-type => 'text/x-json', -charset => 'utf-8'),
          to_json($result, { utf8 => 1 });

お問い合わせは掲示板にて。