CodeIgniter4のページャー機能からVueでカスタマイズしやすいデータを送る

この記事は2022/09/30に作成されました。

データを一覧表示させるときにページャーを配置する機会は多いと思います。
弊社ではCodeIgniter（以降CI4）というPHPフレームワークを使用していますが、その中ではページャーを作ってくれる機能があります。
公式の使い方ではViewファイル内で$pager->links();
などを使ってHTMLが組みあがった状態で出力されます。
これだとVueファイルなどで使用するときにカスタマイズがしにくいです。
CI4のページャー機能を利用しながら、Vue側でカスタマイズしやすい方法を紹介していきたいと思います。

CI4でカスタムのテンプレートを使用できるようにする

まずは、CI4でページャーを用意していきます。
Viewファイル内、$pager->links(グループ名,テンプレート)
でページャーを出力できますが、最後の引数の指定がないとフレームワークが用意したデフォルトのテンプレートを使用してしまいます。
なので追加のテンプレートを作成・設定していきます。
app/Config/Pager.php
に以下のようにテンプレートを追加

public $templates = [
     'default_full'   => 'CodeIgniter\Pager\Views\default_full',
     'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
     'custom_full'     => 'App\Views\Pagers\custom_full',//追加
 ];

ここまででカスタムのテンプレートを使えるようになったので実際にviewを作成していきます。

テンプレートViewを作成

フロント側で組み立てたいので、PHPで出力されている変数だけまとめてJSONで送ります。
以下が実際のテンプレートです。

<?php
use CodeIgniter\Pager\PagerRenderer;

 //現在のページリンクの両側にいくつのリンクを表示するかを指定
 $pager->setSurroundCount(2);
 //現在のページの前側に表示できるリンクが他にもあるかどうか
 $hasPrevious = ($pager->hasPrevious()) ? 1 : 0;

 //---------- first ----------

 //$getFirstPageNumber = $pager->getFirstPageNumber();//メソッドは存在するがページナンバーが正しくないためコメントアウト
 $getFirst = $pager->getFirst();//最初ページへのリンク
 //正しいと思われるuriを分析してpage=の部分を取得する
 $firstPageComponents = parse_url($getFirst);
 parse_str($firstPageComponents['query'], $firstPageResults);
 $getFirstPageNumber = $firstPageResults['page'];//最初ページのページ番号
 $langPagerFirst = lang('Pager.first');//最初ページの文言

 //----------  ----------

 //---------- previous ----------

 $getPreviousPageNumber = $pager->getPreviousPageNumber();//前ページのページ番号
 $getPrevious = $pager->getPrevious();//前ページへのリンク
 $langPagerPrevious = lang('Pager.previous');//前ページの文言
 //----------  ----------
 $pagerLinks = $pager->links();//すべての番号付きリンクに関するデータの配列
 //---------- next ----------
 $hasNext = ($pager->hasNext()) ? 1 : 0;
 $getNextPageNumber = $pager->getNextPageNumber();
 $getNext = $pager->getNext();
 $langPagerNext = lang('Pager.next');

 //----------  ----------

 //---------- last ----------

 //$getLastPageNumber = $pager->getLastPageNumber();//メソッドは存在するがページナンバーが正しくないためコメントアウト
 $getLast = $pager->getLast();//最後ページへのリンク
 //正しいと思われるuriを分析してpage=の部分を取得する
 $lastPageComponents = parse_url($getLast);
 parse_str($lastPageComponents['query'], $lastPageResults);
 $getLastPageNumber = $lastPageResults['page'];//最後ページのページ番号
 $langPagerLast = lang('Pager.last');//最後ページの文言

 //----------  ----------

 $getCurrentPageNumber = $pager->getCurrentPageNumber();//現在のページ番号

 $jsonData = compact(
  'hasPrevious',//現在のページの前側に表示できるリンクが他にもあるかどうか
  'getFirstPageNumber',//最初ページのページ番号
  'getFirst',//最初ページへのリンク
  'langPagerFirst',//最初ページの文言
  'getPreviousPageNumber',//前ページのページ番号
  'getPrevious',//前ページへのリンク
  'langPagerPrevious',//前ページの文言
  'pagerLinks',//すべての番号付きリンクに関するデータの配列
  'hasNext',//現在のページの後側に表示できるリンクが他にもあるかどうか
  'getNextPageNumber',//前ページのページ番号
  'getNext',//最初ページへのリンク
  'langPagerNext',//前ページの文言
  'getLastPageNumber',//最後ページのページ番号
  'getLast',//最後ページへのリンク
  'langPagerLast',//最後ページの文言
  'getCurrentPageNumber',//現在のページ番号
);

echo json_encode($jsonData); ?>

使う上で最低限見る部分は、以下のコメントで変数の説明を行っている箇所になります。
最初へ遷移するときのリンクを例にすると。
hasPreviousで前ページ・最初ページへのボタンの有無を分岐。
getFirstをaタグのhrefに設定、getFirstPageNumberをjs側に送るdata属性に設定、ボタンに表示する文言はlangPagerFirstを設定。このように自分の作ったページャーパーツに各項目を設定してください。

$jsonData = compact(
  'hasPrevious',//現在のページの前側に表示できるリンクが他にもあるかどうか
  'getFirstPageNumber',//最初ページのページ番号
  'getFirst',//最初ページへのリンク
  'langPagerFirst',//最初ページの文言
  'getPreviousPageNumber',//前ページのページ番号
  'getPrevious',//前ページへのリンク
  'langPagerPrevious',//前ページの文言
  'pagerLinks',//すべての番号付きリンクに関するデータの配列
  'hasNext',//現在のページの後側に表示できるリンクが他にもあるかどうか
  'getNextPageNumber',//前ページのページ番号
  'getNext',//最初ページへのリンク
  'langPagerNext',//前ページの文言
  'getLastPageNumber',//最後ページのページ番号
  'getLast',//最後ページへのリンク
  'langPagerLast',//最後ページの文言
  'getCurrentPageNumber',//現在のページ番号
);

Viewでの実装は完了です。
次にVueファイルのtemplate内での使い方を軽く紹介。

Vueファイルで使ってみる

<template>
    <template v-if="pagerObj.hasPrevious">
      <li>
      <a :href="pagerObj.getFirst" :aria-label="pagerObj.langPagerFirst" aria-hidden="true"><
      span dLead">{{ pagerObj.langPagerFirst }}</span>
      </a>
      </li>
      <li>
      <a href="pagerObj.getPrevious" aria-label="pagerObj.langPagerPrevious" aria-hidden="true">
      <span dPove">{{ pagerObj.langPagerPrevious }}</span></a></li>
    </template>
</template>

JSONをデコードして取得したオブジェクトがpagerObjです。
最初と前の要素の部分だけですがこのように組み込めます。
ページャーに関係ありませんが、v-ifをtemplateタグに記述すると無駄にdivで囲まなくてもよくなるので便利です。

まとめ

Vueを使用するとフロントエンドの役割が増えます。
バックエンド側でもフロントで使いやすいデータを送る必要がありますね。
以上になります、ありがとうございました。

Designed by fullvector / Freepik