EC-CUBEに用意されているページ送り（ページネーション）機能を利用する

EC-CUBEにはシステム内で汎用的に利用できる機能がいろいろあるのですが、ページ送り機能についてもわざわざ自作しなくて済むようになっています。

利用するクラスは「SC_PageNavi_Ex」クラスで、これをページオブジェクト内のメンバー変数としてインスタンス化して利用します。

この記事はVer 2.12.x以降のユーザーを対象に書いています。

コンストラクタに必要なパラメーターリスト

SC_PageNavi_Exクラスをインスタンス化するには、次のような引数が必要となります。
「全データ件数」のように必須のパラメーターもあるので、データが揃っていない場合はDBから取得するなどして、利用する前に準備しておいてください。

SC_PageNavi_Exクラスの利用例

ページクラス側

// LC_Page_ExやLC_Page_Admin_Ex を継承した独自ページクラス内のactionメソッド
function action() {
//本当はこのような分かりにくい変数名をつけてはいけませんが、便宜上使用します。
$param1 = $_REQUEST['pageno'];
$param2 = MySearchClass::getMatchCount($_REQUEST['keyword']);
$param3 = 20;
$param4 = 'fnNaviPage';
$param5 = NULL;
$param6 = 'pageno=#page#';
$param7 = true;
$this->objNavi = new SC_PageNavi_Ex($param1,$param2,$param3,
$param4,$param5,$param6,$param7);
}

インスタンス化によって利用可能になるプロパティ

SC_PageNavi_Exインスタンスを生成すると、次のようなプロパティが利用できるようになります。　ただし、これらのプロパティについては明確な取得メソッドがなく、直接アクセスすることになります。

実装するに当たって、テンプレートファイルでこれらのプロパティにアクセスすることがありますが、バージョンアップなどによりプロパティ名が突如変更になる可能性があることに注意しておいてください。

arrPagenaviプロパティについて

プロパティの中でもarrPagenaviプロパティの中身はハッシュデータになっていて、次のようなキーと値が参照できます。

テンプレートに組み込む方法

このように設定されたSC_PageNavi_Exインスタンスはテンプレート側で「$objNavi」変数として利用できるので、以下のようにテンプレートページでプロパティを参照するなどしてページ送り表示を実現することができます。

<form name="form1" method="post" action="?">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<input type="hidden" name="pageno" value="<!--{$objNavi->now_page}-->" />
<p><span class="attention"><!--{$objNavi->all_row}-->件</span>のデータが一致しました。</p>
<div class="paging">
<ul>
<!--▼ページナビ-->
<!--{$objNavi->strnavi}-->
<!--▲ページナビ-->
</ul>
</div>
...(検索結果データの表示など)...
</form>

また、ページ送りのリンクをクリックした際にSC_PageNavi_Exインスタンス生成時に指定したJavaScript関数「fnNaviPage()」が呼び出されるようになっています。

この関数は「/js/site.js」内にあらかじめ以下のように定義されているので、特にform名を変更したりしなくても良いのであれば販売サイト・管理サイトとも、そのまま利用できます。

// ページナビで使用する。
function fnNaviPage(pageno) {
document.form1['pageno'].value = pageno;
document.form1.submit();
}

もし1ページ内で複数のページ送り機能を実装したい場合は、SC_PageNavi_Exインスタンスを複数作成し、JavaScript関数も別のものを自作してコンストラクタのパラメーターに指定することになるでしょう。

以上、お役に立ちましたでしょうか？