CakePHP Paginator sort カスタマイズ ITかあさん

ITかあさん

CakePHP Paginator sort カスタマイズ

CakePHP Paginator sort で、簡単テーブルソートを実現!

スクリーンショット 2015-07-11 11.51.01

大量データの一覧画面で データのソートを簡単に実現できたらなあ!

とかいいつつ、CakePHPでModel~Viewまでをbakeで焼き上げるとちゃんとソートが出来上がっているんだ。
※かあさんのサンプルでは、Bootstrapソートですが、Paginator-<とするとBootstrapを使っていないケースでも動作させることができます。

bakeで焼き上がった ソート用リンク

<th><?php echo $this->BootstrapPaginator->sort(\'number_of_purchase\');?></th>
<th><?php echo $this->BootstrapPaginator->sort(\'purchase_price\');?></th>
<th><?php echo $this->BootstrapPaginator->sort(\'selling_price\');?></th>
<th><?php echo $this->BootstrapPaginator->sort(\'number_of_selling\');?></th>
でも、ソートの名称が日本語名じゃなくて、Modelのフィールド名になっているのが嫌・・

Paginator sortを日本語にする

<th><?php echo $this->BootstrapPaginator->sort(\'number_of_purchase\',\'件数\');?></th>
<th><?php echo $this->BootstrapPaginator->sort(\'purchase_price\',\'買取価格\');?></th>
<th><?php echo $this->BootstrapPaginator->sort(\'selling_price\',\'販売価格\');?></th>
<th><?php echo $this->BootstrapPaginator->sort(\'number_of_selling\',\'件数\');?></th>
第二引数に値を入れると、ソートのリンクが変更されます

Paginatorの降順・昇順(DESC,ASC)によって、記号を出現させる

<a href=\"/courses/index/sort:Price.man_member_sell/direction:desc?stat=\" class=\"asc\">件数</a>
ソート実行中は、なんと、asc,descのクラスがあたっていました!

ですから、ソート実行したら、それが分かるように記号を出現させるにはjQueryなどJavaScriptを使って文字を挿入してあげます。

  $(document).ready(function(){
    $(\".asc\").append(\"▲\");
    $(\".desc\").append(\"▼\");
  });

検索実行時のパラメータもソート条件に含める

実はこれがけっこう悩みました。

<?php if(isset($this->request->query)):?>
<?php $this->BootstrapPaginator->options(array(\'url\' => array(\'?\' => $this->request->query))); ?>
<?php endif;?>
urlオプションに対して、request queryをセット。(検索実行時のパラメータ)

これは、通常のpagenateの場合でも一緒。

以上となります

初夏のJavaScript祭 in サーキュレーションビル ForPro