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

ec-cube-pagination.png

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

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

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

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

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

引数 必須 解説
1 integer 現在のページ数番号。 デフォルトは1。
2 integer データ検索等で一致した全データ件数。
3 integer 1ページあたりのデータ表示件数。
4 string ページ送りのクリック時に実行するJavaScript関数名。
5 integer ページ送りで表示するページリンクの数。 デフォルトはNAVI_PMAX定数。
6 string ページ送りリンクに付加したいURLクエリ文字列。 デフォルトは空文字列。
7 boolean ページ送りリンクで番号リンクを表示するかどうか。 デフォルトはtrue。

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

プロパティ名 解説
now_page 現在のページ番号
max_page 最終のページ番号
start_row 開始レコード
strnavi ページ送り文字列
arrPagenavi ページデータ参照用のハッシュ配列(後述)

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

arrPagenaviプロパティについて

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

キー名
mode モード。 常に「search」が設定される。
now_page 現在のページ番号。
before 前のページ番号。 ない場合はnow_pageと同じ値。
next 次のページ番号。 ない場合はnow_pageと同じ値。
arrPageno ページ番号が入った配列。

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

このように設定された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関数も別のものを自作してコンストラクタのパラメーターに指定することになるでしょう。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2013-08-22