« テンプレート・エンジンが好きになれない。 | トップページ | Railsで掲示板を作成 »

2009年8月 5日 (水)

JavaScriptでソート・ページネーション対応テーブルを作る。

ページネーションをするのに、Railsではよくwill_paginateが使われるが、前回も言ったように、サーバー側でビューのロジックを書かないといけないのは好きになれない。

なので一度、データをすべてJSONで取得し、クライアント側のJavaScriptでソートやページネーションを行う対応をした。その分、初期表示が遅くなるかもしれないが、1000件ぐらいのデータだと、ものの10秒以内に表示できる。それ以上は表示しても、誰も見ないだろうから問題ないとしている。

ソースはgithubに上げました。
   git clone git://github.com/takeshy/sortable_table_with_pagination.git

  使い方
  table.jsを読み込み、下記のフォーマットでnewする。

 var tableObj = new SortableTable({id:'テーブルを表示するノードの親のID',
    data_set: テーブルデータ※後述
    block_num:1画面最大表示件数
    call_back: 画面描画後に呼び出すフック関数
   });
テーブルデータ
   { option: 出力するテーブルタグに付加する属性(style="width:52em;"など),
     header:[
      {name:'列のタイトル',sort:'ソート種別(number or normal)',width:'列幅'}
             :  ←列の数だけ上記エントリを作成
   ],
     data:[
      [行1、列1のデータ, 行1、列2のデータ,…],
                  :    ←行の数だけ上記エントリを作成
    ]
   }

(例) 本aが290円、本Bが330円,本Cが450円で1画面最大表示レコードが2件の場合

 var tableObj = new SortableTable({id:'book_div',
    data_set:{option:'class=”list”',header:
  [{name:'書籍名',sort:'normal',width:'10em'},
     {name:'金額',sort:'number',width:'6em'}],
     data:[['a','290円'],['b','330円'],['c','450円']]},
    block_num: 2,
    call_back:null
   });

イメージ
Table1_3  

|

« テンプレート・エンジンが好きになれない。 | トップページ | Railsで掲示板を作成 »

Ajax」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/68673/45847379

この記事へのトラックバック一覧です: JavaScriptでソート・ページネーション対応テーブルを作る。:

« テンプレート・エンジンが好きになれない。 | トップページ | Railsで掲示板を作成 »